@open-discord-bots/framework 0.2.17 → 0.3.0

package/dist/api/modules/component.js

@@ -0,0 +1,1344 @@
+///////////////////////////////////////
+//COMPONENTS MODULE
+///////////////////////////////////////
+import { ODId, ODSystemError, ODManagerData, ODManager } from "./base.js";
+import * as discord from "discord.js";
+import { ODWorkerManager, ODWorker } from "./worker.js";
+/**## ODComponentFactoryInstance `class`
+ * An Open Discord component factory instance.
+ *
+ * It will contain the final root component which is returned by an `ODComponentFactory`.
+ * This component can be used in another `ODComponentFactory` or rendered to a message/modal.
+ */
+export class ODComponentFactoryInstance {
+    /**The root component of this factory. */
+    #rootComponent = null;
+    /**The root component of this factory. */
+    getComponent() {
+        return this.#rootComponent;
+    }
+    /**Set the root component of this factory. */
+    setComponent(c) {
+        this.#rootComponent = c;
+    }
+}
+/**## ODComponentFactory `class`
+ * An Open Discord component factory.
+ *
+ * It is a collection of functions/workers/hooks which will build a Discord message/modal component from scratch.
+ * Plugins can intercept and modify these workers to replace default behaviour or layout.
+ */
+export class ODComponentFactory extends ODManagerData {
+    /**A collection of all workers for this component factory.  */
+    workers;
+    constructor(id, callback, priority, callbackId) {
+        super(id);
+        this.workers = new ODWorkerManager("ascending");
+        if (callback)
+            this.workers.add(new ODWorker(callbackId ? callbackId : id, priority ?? 0, callback));
+    }
+    /**Run all workers and return the resulting component. */
+    async build(origin, params) {
+        const instance = new ODComponentFactoryInstance();
+        await this.workers.executeWorkers(instance, origin, params);
+        const rootComponent = instance.getComponent();
+        if (!rootComponent)
+            throw new ODSystemError("ODComponentFactory.build() --> Failed to build component! (id: " + this.id.value + ")");
+        return rootComponent.build();
+    }
+}
+/**## ODBaseComponentManager `class`
+ * A generic Open Discord component manager.
+ *
+ * It contains a collection of all Open Discord component factories. You can:
+ * - Add your own message/modal component factories
+ * - Modify existing message/modal component factories
+ *
+ * Messages created using this system are not compatible with `ODBuilder` messages!
+ */
+export class ODBaseComponentManager extends ODManager {
+    get(id) {
+        return super.get(id);
+    }
+    remove(id) {
+        return super.remove(id);
+    }
+    exists(id) {
+        return super.exists(id);
+    }
+}
+/**## ODSharedComponentManager `class
+ * A special class with types for shared message/modal `ODComponent`'s.
+ * Create button, dropdown or any other layout component template to use them in messages & modals.
+ */
+export class ODSharedComponentManager extends ODBaseComponentManager {
+    constructor(debug) {
+        super(debug, "shared component");
+    }
+}
+/**## ODMessageComponentManager `class
+ * A special class with types for `ODMessageComponent`'s.
+ * Create message templates to use as replies and make use of shared components.
+ */
+export class ODMessageComponentManager extends ODBaseComponentManager {
+    constructor(debug) {
+        super(debug, "message component");
+    }
+}
+/**## ODModalComponentManager `class
+ * A special class with types for `ODModalComponent`'s.
+ * Create modal templates to use as forms and make use of shared components.
+ */
+export class ODModalComponentManager extends ODBaseComponentManager {
+    constructor(debug) {
+        super(debug, "modal component");
+    }
+}
+/**## ODComponentManager `class`
+ * An Open Discord component manager.
+ *
+ * Create message & modal templates, re-use components and design all visual elements of the bot.
+ *
+ * Using the Open Discord component system has many advantages compared to vanilla `discord.js`:
+ * - Plugins can extend, edit & replace messages & components
+ * - Includes automatic error handling
+ * - Independent workers/hooks (with priority)
+ * - Fail-safe design using try-catch
+ * - Automatic switch between components v2 and legacy components depending on message requirements
+ * - Get to know the origin of the request (e.g. button, dropdown, modal, ...)
+ * - And so much more!
+ */
+export class ODComponentManager {
+    /**The manager for all shared components. */
+    shared;
+    /**The manager for all messages components. */
+    messages;
+    /**The manager for all modals components. */
+    modals;
+    constructor(debug) {
+        this.shared = new ODSharedComponentManager(debug);
+        this.messages = new ODMessageComponentManager(debug);
+        this.modals = new ODModalComponentManager(debug);
+    }
+}
+/**## ODComponent `class`
+ * An Open Discord message/modal component.
+ *
+ * This class itself doesn't do anything, but is a blueprint for other
+ * `ODComponent` classes which represent the new Discord message/modal components.
+ */
+export class ODComponent {
+    /**The id of this message/modal component. */
+    id;
+    /**The data or configuration of this message/modal component. */
+    data;
+    constructor(id, data) {
+        this.id = new ODId(id);
+        this.data = data;
+    }
+}
+/**## ODGroupComponent `class`
+ * An Open Discord message/modal component with children.
+ *
+ * This class itself doesn't do anything, but is a blueprint for other
+ * `ODGroupComponent` classes which represent the new Discord message/modal components.
+ */
+export class ODGroupComponent extends ODComponent {
+    /**The collection of child components. */
+    children = [];
+    addComponent(c, mode = "start", reference) {
+        if (mode == "start")
+            this.children.unshift(c);
+        else if (mode == "end")
+            this.children.push(c);
+        else if (mode == "before") {
+            if (!reference || !this.children.find((c) => c.id.value === new ODId(reference).value))
+                this.children.unshift(c);
+            else {
+                const referenceIndex = this.children.findIndex((c) => c.id.value === new ODId(reference).value);
+                this.children.splice(referenceIndex, 0, c); //insert at position 'referenceIndex' (before)
+            }
+        }
+        else if (mode == "after") {
+            if (!reference || !this.children.find((c) => c.id.value === new ODId(reference).value))
+                this.children.push(c);
+            else {
+                const referenceIndex = this.children.findIndex((c) => c.id.value === new ODId(reference).value);
+                this.children.splice(referenceIndex + 1, 0, c); //insert at position 'referenceIndex+1' (after)
+            }
+        }
+        else if (mode == "index") {
+            if (!reference || typeof reference !== "number")
+                this.children.push(c);
+            else {
+                this.children.splice(reference, 0, c); //insert at position 'reference'
+            }
+        }
+    }
+    /**Get a component with a certain ID in this group. Returns `null` if non-existent. */
+    getComponent(id) {
+        const component = this.children.find((c) => c.id.value === new ODId(id).value);
+        return component ?? null;
+    }
+    /**Get the position of a component with a certain ID in this group. Returns `-1` if non-existent. */
+    getComponentPosition(id) {
+        return this.children.findIndex((c) => c.id.value === new ODId(id).value);
+    }
+    /**Returns if a component with a certain ID exists in this group. */
+    existsComponent(id) {
+        const component = this.children.find((c) => c.id.value === new ODId(id).value);
+        return component ? true : false;
+    }
+    /**Remove a component with a certain ID from this group. Returns the removed component or `null if non-existent. */
+    removeComponent(id) {
+        const index = this.children.findIndex((c) => c.id.value === new ODId(id).value);
+        if (index < 0)
+            return null;
+        else
+            return this.children.splice(index, 1)[0];
+    }
+    moveComponent(id, mode = "start", reference) {
+        const component = this.removeComponent(id);
+        if (component) {
+            if (mode == "start" || mode == "end")
+                this.addComponent(component, mode);
+            if ((mode == "before" || mode == "after") && reference)
+                this.addComponent(component, mode, reference);
+            if (mode == "index" && typeof reference == "number")
+                this.addComponent(component, mode, reference);
+            return;
+        }
+    }
+}
+/**## ODParentComponent `class`
+ * An Open Discord message/modal component with a single child.
+ *
+ * This class itself doesn't do anything, but is a blueprint for other
+ * `ODParentComponent` classes which represent the new Discord message/modal components.
+ */
+export class ODParentComponent extends ODComponent {
+    /**The child component of this parent. */
+    #child = null;
+    /**The child component of this parent. */
+    get child() {
+        return this.#child;
+    }
+    /**Set the child component of this parent. */
+    setComponent(c) {
+        this.#child = c;
+    }
+}
+/**## ODMessageComponent `class`
+ * A message builder with **components v2** support.
+ * Add items to this message using `addComponent()`.
+ *
+ * Use `ODSimpleMessageComponent` for components v1, polls, embeds, etc
+ */
+export class ODMessageComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODMessageComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        const attachments = [...(this.data.additionalAttachments ?? [])];
+        const components = [];
+        for (const component of this.children) {
+            if (component instanceof ODFileComponent) {
+                //ODFileComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.file);
+                if (res?.attachment)
+                    attachments.push(res.attachment);
+            }
+            else if (component instanceof ODGalleryComponent) {
+                //ODGalleryComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.gallery);
+                if (res?.attachments)
+                    attachments.push(...res.attachments);
+            }
+            else {
+                //general ODComponent's
+                const res = await component.build();
+                if (res)
+                    components.push(res);
+            }
+        }
+        return {
+            msg: {
+                components,
+                files: attachments,
+                ...this.data.additionalOptions
+            },
+            componentsV2: true,
+            ephemeral: this.data.ephemeral ?? false,
+            supressEmbeds: this.data.supressEmbeds ?? false,
+            supressNotifications: this.data.supressNotifications ?? false
+        };
+    }
+    /**Enable/disable ephemeral mode. */
+    setEphemeral(value) {
+        this.data.ephemeral = value;
+    }
+    /**Enable supress (hide) embeds mode. */
+    setSupressEmbeds(value) {
+        this.data.supressEmbeds = value;
+    }
+    /**Enable supress (hide) notifications mode. */
+    setSupressNotifications(value) {
+        this.data.supressNotifications = value;
+    }
+    /**Add an additional attachment which can be used in components as `attachment://...` */
+    addAdditionalAttachments(...attachments) {
+        if (!this.data.additionalAttachments)
+            this.data.additionalAttachments = [];
+        this.data.additionalAttachments.push(...attachments);
+    }
+}
+/**## ODSimpleMessageComponent `class`
+ * A message builder with **components v1** support.
+ * Add items to this message using `addComponent()`.
+ *
+ * Use `ODMessageComponent` for components v2, components, containers, etc
+ */
+export class ODSimpleMessageComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODMessageComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        const attachments = [...(this.data.additionalAttachments ?? [])];
+        const embeds = [];
+        let content = undefined;
+        let poll = undefined;
+        for (const component of this.children) {
+            if (component instanceof ODFileComponent) {
+                //ODFileComponent (special)
+                const res = await component.build();
+                if (res?.attachment)
+                    attachments.push(res.attachment);
+            }
+            else if (component instanceof ODContentComponent) {
+                //ODContentComponent (special)
+                const res = await component.build();
+                if (res)
+                    content = res.content;
+            }
+            else if (component instanceof ODEmbedComponent) {
+                //ODEmbedComponent (special)
+                const res = await component.build();
+                if (res)
+                    embeds.push(res);
+            }
+            else {
+                //ODPollComponent (special)
+                const res = await component.build();
+                if (res)
+                    poll = res;
+            }
+        }
+        return {
+            msg: {
+                content,
+                embeds,
+                poll,
+                files: attachments,
+                ...this.data.additionalOptions
+            },
+            componentsV2: false,
+            ephemeral: this.data.ephemeral ?? false,
+            supressEmbeds: this.data.supressEmbeds ?? false,
+            supressNotifications: this.data.supressNotifications ?? false
+        };
+    }
+    /**Enable/disable ephemeral mode. */
+    setEphemeral(value) {
+        this.data.ephemeral = value;
+    }
+    /**Enable supress (hide) embeds mode. */
+    setSupressEmbeds(value) {
+        this.data.supressEmbeds = value;
+    }
+    /**Enable supress (hide) notifications mode. */
+    setSupressNotifications(value) {
+        this.data.supressNotifications = value;
+    }
+    /**Add an additional attachment which can be used in components as `attachment://...` */
+    addAdditionalAttachments(...attachments) {
+        if (!this.data.additionalAttachments)
+            this.data.additionalAttachments = [];
+        this.data.additionalAttachments.push(...attachments);
+    }
+}
+/**## ODModalComponent `class`
+ * A modal builder with **components v2** support.
+ * Add questions, select menu's & labels to this modal using `addComponent()`.
+ */
+export class ODModalComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { title: "<empty>", ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODModalComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        if (this.children.length > 5)
+            throw new ODSystemError("ODModalComponent:build('" + this.id.value + "') => A modal doesn't support more than 5 components.");
+        const components = [];
+        for (const component of this.children) {
+            if (component instanceof ODLabelComponent) {
+                //ODLabelComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.toJSON());
+            }
+            else {
+                //ODTextComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.toJSON());
+            }
+        }
+        return new discord.ModalBuilder({
+            components,
+            title: this.data.title,
+            customId: this.data.customId
+        });
+    }
+    /**Set the title of the modal. */
+    setTitle(title) {
+        this.data.title = title;
+    }
+    /**Set the custom id of this modal. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+}
+/**## ODActionRowComponent `class`
+ * An actionrow component which is a container for buttons, a select menu or inputs in a message or modal.
+ */
+export class ODActionRowComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODActionRowComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        if (this.children.length > 5)
+            throw new ODSystemError("ODActionRowComponent:build('" + this.id.value + "') => An action row doesn't support more than 5 components.");
+        const components = [];
+        for (const component of this.children) {
+            //actionrow ODComponent's
+            const res = await component.build();
+            if (res)
+                components.push(res);
+        }
+        return new discord.ActionRowBuilder({ components });
+    }
+}
+/**## ODContainerComponent `class`
+ * An embed-like container for text, titles, buttons, sections, separators and other components.
+ */
+export class ODContainerComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { spoiler: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODContainerComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        const components = [];
+        const attachments = [];
+        for (const component of this.children) {
+            if (component instanceof ODFileComponent) {
+                //ODFileComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.file.toJSON());
+                if (res?.attachment)
+                    attachments.push(res.attachment);
+            }
+            else if (component instanceof ODGalleryComponent) {
+                //ODGalleryComponent (special)
+                const res = await component.build();
+                if (res)
+                    components.push(res.gallery.toJSON());
+                if (res?.attachments)
+                    attachments.push(...res.attachments);
+            }
+            else {
+                //general ODComponent's
+                const res = await component.build();
+                if (res)
+                    components.push(res.toJSON());
+            }
+        }
+        return {
+            container: new discord.ContainerBuilder({
+                components,
+                accent_color: this.data.color ? discord.resolveColor(this.data.color) : undefined,
+                spoiler: this.data.spoiler
+            }),
+            attachments
+        };
+    }
+    /**Set the accent color of this embed-like container. */
+    setColor(color) {
+        this.data.color = color ?? undefined;
+    }
+    /**Mark the contents of this container as spoiler. */
+    setSpoiler(spoiler) {
+        this.data.spoiler = spoiler;
+    }
+}
+/**## ODSectionComponent `class`
+ * A layout component that allows you to contextually associate content with an accessory component.
+ * - Components: Left
+ * - Accessory: Right
+ */
+export class ODSectionComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODSectionComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        if (this.children.length > 3)
+            throw new ODSystemError("ODSectionComponent:build('" + this.id.value + "') => A maximum of 3 child components are allowed in a section.");
+        const components = [];
+        for (const component of this.children) {
+            //section ODComponent's
+            const res = await component.build();
+            if (res)
+                components.push(res.toJSON());
+        }
+        let accessory = undefined;
+        if (this.data.accessory) {
+            const accessoryRes = await this.data.accessory.build();
+            if (accessoryRes)
+                accessory = accessoryRes.toJSON();
+        }
+        return new discord.SectionBuilder({ components, accessory });
+    }
+    /**Set the accessory component shown on the right side of the section. */
+    setAccessory(accessory) {
+        this.data.accessory = accessory ?? undefined;
+    }
+}
+/**## ODLabelComponent `class`
+ * A visual separator between components. The visibility and padding of this separator can be changed.
+ */
+export class ODLabelComponent extends ODParentComponent {
+    constructor(id, data) {
+        const initData = { title: "<empty>", ...data };
+        super(id, initData);
+    }
+    async build() {
+        let component = undefined;
+        if (this.child) {
+            const accessoryRes = await this.child.build();
+            if (accessoryRes)
+                component = accessoryRes.toJSON();
+        }
+        return new discord.LabelBuilder({
+            label: this.data.title,
+            description: this.data.description,
+            component
+        });
+    }
+    /**Set the title of the child component in the modal. */
+    setTitle(title) {
+        this.data.title = title;
+    }
+    /**Set the description of the child component in the modal. */
+    setDescription(description) {
+        this.data.description = description ?? undefined;
+    }
+}
+/**## ODSeparatorComponent `class`
+ * A visual separator between components. The visibility and padding of this separator can be changed.
+ */
+export class ODSeparatorComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { divider: true, spacing: "small", ...data };
+        super(id, initData);
+    }
+    async build() {
+        return new discord.SeparatorBuilder({
+            divider: this.data.divider,
+            spacing: (this.data.spacing == "small") ? discord.SeparatorSpacingSize.Small : discord.SeparatorSpacingSize.Large
+        });
+    }
+    /**Set whether a visual divider should be displayed in the component. (Default: `true`). */
+    setDivider(divider) {
+        this.data.divider = divider;
+    }
+    /**Set the size of separator padding (Default `small`). */
+    setSpacing(spacing) {
+        this.data.spacing = spacing;
+    }
+}
+/**## ODTextComponent `class`
+ * A text component which renders markdown text in a message.
+ */
+export class ODTextComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { content: "", ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.data.content.length < 1)
+            throw new ODSystemError("ODTextComponent:build('" + this.id.value + "') => Unable to display text component without contents.");
+        return new discord.TextDisplayBuilder({
+            content: this.data.content
+        });
+    }
+    /**Set the text to display. */
+    setContent(value) {
+        this.data.content = value;
+    }
+}
+/**## ODFileComponent `class`
+ * A file component which adds a file in a message.
+ */
+export class ODFileComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { name: "file.txt", ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (!this.data.content && !this.data.externalUrl)
+            throw new ODSystemError("ODFileComponent:build('" + this.id.value + "') => Unable to display file component without binary or url.");
+        const attachment = (this.data.content) ? new discord.AttachmentBuilder(this.data.content, {
+            name: this.data.name,
+            description: this.data.description
+        }) : null;
+        return {
+            attachment,
+            file: new discord.FileBuilder({
+                file: {
+                    url: (this.data.externalUrl ?? "attachment://" + this.data.name)
+                },
+                spoiler: this.data.spoiler
+            })
+        };
+    }
+    /**Set the filename + extension. */
+    setName(value) {
+        this.data.name = value;
+    }
+    /**Set the file description. */
+    setDescription(value) {
+        this.data.description = value ?? undefined;
+    }
+    /**Set the text/binary contents of the file. */
+    setContent(value) {
+        this.data.content = value ?? undefined;
+    }
+    /**Set a URL to an external file or image. When used, `setContent()` will be ignored! */
+    setExternalUrl(value) {
+        this.data.externalUrl = value ?? undefined;
+    }
+    /**Mark the file as spoiler. */
+    setSpoiler(value) {
+        this.data.spoiler = value;
+    }
+}
+/**## ODGalleryComponent `class`
+ * A gallery component which renders a grid of media items (images/videos) in a message.
+ * Add items to this gallery using `addComponent()`.
+ */
+export class ODGalleryComponent extends ODGroupComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.children.length < 1)
+            throw new ODSystemError("ODGalleryComponent:build('" + this.id.value + "') => Requires at least one child component.");
+        const gallery = new discord.MediaGalleryBuilder();
+        const attachments = [];
+        for (const file of this.children) {
+            if (!file.data.content && !file.data.externalUrl)
+                continue;
+            if (file.data.content)
+                attachments.push(new discord.AttachmentBuilder(file.data.content, {
+                    name: file.data.name,
+                    description: file.data.description
+                }));
+            gallery.addItems(new discord.MediaGalleryItemBuilder({
+                description: file.data.description,
+                spoiler: file.data.spoiler,
+                media: {
+                    url: (file.data.externalUrl ?? "attachment://" + file.data.name)
+                }
+            }));
+        }
+        return { gallery, attachments };
+    }
+}
+/**## ODThumbnailComponent `class`
+ * A thumbnail component which renders a small image as an accessory inside an `ODSectionComponent`.
+ * This component must be used via `ODSectionComponent.setComponent()`
+ */
+export class ODThumbnailComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { url: "", ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.data.url.length < 1)
+            throw new ODSystemError("ODThumbnailComponent:build('" + this.id.value + "') => Thumbnail component requires an image URL.");
+        return new discord.ThumbnailBuilder({
+            media: { url: this.data.url },
+            description: this.data.description,
+            spoiler: this.data.spoiler
+        });
+    }
+    /**Set the URL of the thumbnail image. */
+    setUrl(value) {
+        this.data.url = value;
+    }
+    /**Set the alt text/description of the thumbnail image. */
+    setDescription(value) {
+        this.data.description = value ?? undefined;
+    }
+    /**Mark the thumbnail as a spoiler. */
+    setSpoiler(value) {
+        this.data.spoiler = value;
+    }
+}
+/**## ODContentComponent `class`
+ * A text component which renders markdown text in a message without `Components V2` enabled. (Old behaviour)
+ */
+export class ODContentComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { content: "", ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.data.content.length < 1)
+            throw new ODSystemError("ODContentComponent:build('" + this.id.value + "') => Unable to display content component without contents.");
+        return {
+            content: this.data.content
+        };
+    }
+    /**Set the text to display. */
+    setContent(value) {
+        this.data.content = value;
+    }
+}
+/**## ODEmbedComponent `class`
+ * An embed component which renders an embed in a message without `Components V2` enabled. (Old behaviour)
+ */
+export class ODEmbedComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.data.title && this.data.title.length > 256)
+            throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => An embed title can't exceed 256 characters.");
+        if (this.data.description && this.data.description.length > 4096)
+            throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => An embed description can't exceed 4096 characters.");
+        if (this.data.fields && this.data.fields.length > 25)
+            throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => An embed can't contain more than 25 fields.");
+        if (this.data.footerText && this.data.footerText.length > 2048)
+            throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => An embed footer can't exceed 2048 characters.");
+        if (this.data.authorText && this.data.authorText.length > 256)
+            throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => An embed author can't exceed 256 characters.");
+        return new discord.EmbedBuilder({
+            title: this.data.title,
+            color: (this.data.color) ? discord.resolveColor(this.data.color) : undefined,
+            url: this.data.url,
+            description: this.data.description,
+            author: (this.data.authorText) ? {
+                name: this.data.authorText,
+                icon_url: this.data.authorImage,
+                url: this.data.authorUrl
+            } : undefined,
+            footer: (this.data.footerText) ? {
+                text: this.data.footerText,
+                icon_url: this.data.footerImage
+            } : undefined,
+            image: (this.data.image) ? {
+                url: this.data.image
+            } : undefined,
+            thumbnail: (this.data.thumbnail) ? {
+                url: this.data.thumbnail
+            } : undefined,
+            fields: this.data.fields,
+            timestamp: (this.data.timestamp) ? new Date(this.data.timestamp).toISOString() : undefined
+        });
+    }
+    /**Set the title of this embed */
+    setTitle(title) {
+        this.data.title = title ?? undefined;
+        return this;
+    }
+    /**Set the color of this embed */
+    setColor(color) {
+        this.data.color = color ?? undefined;
+        return this;
+    }
+    /**Set the url of this embed */
+    setUrl(url) {
+        this.data.url = url ?? undefined;
+        return this;
+    }
+    /**Set the description of this embed */
+    setDescription(description) {
+        this.data.description = description ?? undefined;
+        return this;
+    }
+    /**Set the author of this embed */
+    setAuthor(text, image, url) {
+        this.data.authorText = text ?? undefined;
+        this.data.authorImage = image ?? undefined;
+        this.data.authorUrl = url ?? undefined;
+        return this;
+    }
+    /**Set the footer of this embed */
+    setFooter(text, image) {
+        this.data.footerText = text ?? undefined;
+        this.data.footerImage = image ?? undefined;
+        return this;
+    }
+    /**Set the image of this embed */
+    setImage(image) {
+        this.data.image = image ?? undefined;
+        return this;
+    }
+    /**Set the thumbnail of this embed */
+    setThumbnail(thumbnail) {
+        this.data.thumbnail = thumbnail ?? undefined;
+        return this;
+    }
+    /**Set the fields of this embed */
+    setFields(fields) {
+        //Check field properties
+        for (const [index, field] of fields.entries()) {
+            if (field.value.length >= 1024)
+                throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => field " + index + " reached 1024 character limit!");
+            if (field.name.length >= 256)
+                throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => field " + index + " reached 256 name character limit!");
+        }
+        this.data.fields = fields;
+        return this;
+    }
+    /**Add fields to this embed */
+    addFields(...fields) {
+        //Check field properties
+        for (const [index, field] of fields.entries()) {
+            if (field.value.length >= 1024)
+                throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => field " + index + " reached 1024 character limit!");
+            if (field.name.length >= 256)
+                throw new ODSystemError("ODEmbedComponent:build('" + this.id.value + "') => field " + index + " reached 256 name character limit!");
+        }
+        if (!this.data.fields)
+            this.data.fields = [];
+        this.data.fields.push(...fields);
+        return this;
+    }
+    /**Clear all fields from this embed */
+    clearFields() {
+        this.data.fields = [];
+        return this;
+    }
+    /**Set the timestamp of this embed. When set to `true`, the current timestamp is used. */
+    setTimestamp(timestamp) {
+        if (timestamp === true)
+            this.data.timestamp = new Date();
+        else
+            this.data.timestamp = timestamp ?? undefined;
+        return this;
+    }
+}
+/**## ODPollComponent `class`
+ * A poll component which adds a poll to a message without `Components V2` enabled. (Old behaviour)
+ */
+export class ODPollComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { question: "<empty>", durationHours: 1, allowMultiSelect: false, answers: [], ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (this.data.question.length < 1)
+            throw new ODSystemError("ODPollComponent:build('" + this.id.value + "') => Please provide a valid poll question.");
+        if (this.data.answers.length < 1)
+            throw new ODSystemError("ODPollComponent:build('" + this.id.value + "') => Please provide at least one answer to the poll.");
+        return {
+            layoutType: discord.PollLayoutType.Default,
+            allowMultiselect: this.data.allowMultiSelect,
+            duration: this.data.durationHours,
+            question: { text: this.data.question },
+            answers: this.data.answers
+        };
+    }
+    /**Set the poll question. */
+    setQuestion(question) {
+        this.data.question = question;
+    }
+    /**Set the poll duration in hours. */
+    setDurationHours(duration) {
+        this.data.durationHours = duration;
+    }
+    /**Allow selecting multiple answers. */
+    setMultiSelect(multi) {
+        this.data.allowMultiSelect = multi;
+    }
+    /**Set the poll answers. */
+    setAnswers(answers) {
+        this.data.answers = answers;
+    }
+    /**Add additional poll answers. */
+    addAnswers(...answers) {
+        this.data.answers.push(...answers);
+    }
+}
+/**## ODButtonComponent `class`
+ * A button component which renders an interactive button inside the message.
+ * A reply can be sent using Open Discord responders.
+ */
+export class ODButtonComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { color: "gray", disabled: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (!this.data.emoji && !this.data.label)
+            throw new ODSystemError("ODButtonComponent:build('" + this.id.value + "') => A button must include at least one label or emoji.");
+        if (this.data.customId && this.data.customId.length > 100)
+            throw new ODSystemError("ODButtonComponent:build('" + this.id.value + "') => A custom ID '" + this.data.customId + "' must be shorter than 100 characters.");
+        return new discord.ButtonBuilder({
+            customId: (!this.data.url) ? this.data.customId : undefined,
+            label: this.data.label,
+            emoji: this.data.emoji ? discord.resolvePartialEmoji(this.data.emoji) : undefined,
+            disabled: this.data.disabled,
+            url: (this.data.url) ? this.data.url : undefined,
+            style: this.getButtonStyle(),
+        });
+    }
+    /**Get the `discord.ButtonStyle` for the specified `ODValidButtonColor` */
+    getButtonStyle() {
+        if (this.data.url)
+            return discord.ButtonStyle.Link;
+        else if (this.data.color == "blue")
+            return discord.ButtonStyle.Primary;
+        else if (this.data.color == "green")
+            return discord.ButtonStyle.Success;
+        else if (this.data.color == "red")
+            return discord.ButtonStyle.Danger;
+        else
+            return discord.ButtonStyle.Secondary;
+    }
+    /**Set the custom id of this button. Ignored when `setUrl()` is used. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Set the url of this button. */
+    setUrl(url) {
+        this.data.url = url ?? undefined;
+        return this;
+    }
+    /**Set the color of this button. Ignored when `setUrl()` is used. */
+    setColor(color) {
+        this.data.color = color;
+        return this;
+    }
+    /**Set the label of this button. */
+    setLabel(label) {
+        this.data.label = label ?? undefined;
+        return this;
+    }
+    /**Set the emoji of this button. */
+    setEmoji(emoji) {
+        this.data.emoji = emoji ?? undefined;
+        return this;
+    }
+    /**Disable this button. */
+    setDisabled(disabled) {
+        this.data.disabled = disabled;
+        return this;
+    }
+}
+/**## ODShortInputComponent `class`
+ * A short text input component for modals.
+ * It must be placed inside an `ODLabelComponent`.
+ */
+export class ODShortInputComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { required: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        return new discord.TextInputBuilder({
+            style: discord.TextInputStyle.Short,
+            customId: this.data.customId,
+            minLength: this.data.minLength,
+            maxLength: this.data.maxLength,
+            required: this.data.required,
+            placeholder: this.data.placeholder,
+            value: this.data.initialValue
+        });
+    }
+    /**Set the custom id of this modal text input. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Set the minimum amount of characters of this modal text input. */
+    setMinLength(length) {
+        this.data.minLength = length ?? undefined;
+        return this;
+    }
+    /**Set the maximum amount of characters of this modal text input. */
+    setMaxLength(length) {
+        this.data.maxLength = length ?? undefined;
+        return this;
+    }
+    /**Set the placeholder of this modal text input. */
+    setPlaceholder(placeholder) {
+        this.data.placeholder = placeholder ?? undefined;
+        return this;
+    }
+    /**Set the initial value of this modal text input. */
+    setInitialValue(initialValue) {
+        this.data.initialValue = initialValue ?? undefined;
+        return this;
+    }
+    /**Mark this modal text input as required. */
+    setRequired(required) {
+        this.data.required = required;
+        return this;
+    }
+}
+/**## ODParagraphInputComponent `class`
+ * A paragraph text input component for modals.
+ * It must be placed inside an `ODLabelComponent`.
+ */
+export class ODParagraphInputComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { required: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        return new discord.TextInputBuilder({
+            style: discord.TextInputStyle.Paragraph,
+            customId: this.data.customId,
+            minLength: this.data.minLength,
+            maxLength: this.data.maxLength,
+            required: this.data.required,
+            placeholder: this.data.placeholder,
+            value: this.data.initialValue
+        });
+    }
+    /**Set the custom id of this modal text input. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Set the minimum amount of characters of this modal text input. */
+    setMinLength(length) {
+        this.data.minLength = length ?? undefined;
+        return this;
+    }
+    /**Set the maximum amount of characters of this modal text input. */
+    setMaxLength(length) {
+        this.data.maxLength = length ?? undefined;
+        return this;
+    }
+    /**Set the placeholder of this modal text input. */
+    setPlaceholder(placeholder) {
+        this.data.placeholder = placeholder ?? undefined;
+        return this;
+    }
+    /**Set the initial value of this modal text input. */
+    setInitialValue(initialValue) {
+        this.data.initialValue = initialValue ?? undefined;
+        return this;
+    }
+    /**Mark this modal text input as required. */
+    setRequired(required) {
+        this.data.required = required;
+        return this;
+    }
+}
+/**## ODDropdownComponent `class`
+ * A dropdown component which renders an interactive dropdown inside the message/modal.
+ * A reply can be sent using Open Discord responders.
+ */
+export class ODDropdownComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { type: "string", ...data };
+        super(id, initData);
+    }
+    async build() {
+        const genericOpts = {
+            customId: this.data.customId,
+            disabled: this.data.disabled,
+            placeholder: this.data.placeholder,
+            minValues: this.data.minValues,
+            maxValues: this.data.maxValues,
+        };
+        if (this.data.type == "string") {
+            if (!this.data.options || this.data.options.length < 1)
+                throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please provide at least one string option using setOptions().");
+            return new discord.StringSelectMenuBuilder({
+                ...genericOpts,
+                options: this.data.options
+            });
+        }
+        else if (this.data.type == "user") {
+            if (!this.data.users || this.data.users.length < 1)
+                throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please provide at least one user option using setUsers().");
+            return new discord.UserSelectMenuBuilder({
+                ...genericOpts,
+                defaultValues: this.data.users.map((u) => ({ id: u.id, type: discord.SelectMenuDefaultValueType.User }))
+            });
+        }
+        else if (this.data.type == "role") {
+            if (!this.data.roles || this.data.roles.length < 1)
+                throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please provide at least one role option using setRoles().");
+            return new discord.RoleSelectMenuBuilder({
+                ...genericOpts,
+                defaultValues: this.data.roles.map((r) => ({ id: r.id, type: discord.SelectMenuDefaultValueType.Role }))
+            });
+        }
+        else if (this.data.type == "channel") {
+            if (!this.data.channels || this.data.channels.length < 1)
+                throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please provide at least one channel option using setChannels().");
+            return new discord.ChannelSelectMenuBuilder({
+                ...genericOpts,
+                channelTypes: this.data.channelTypes,
+                defaultValues: this.data.channels.map((c) => ({ id: c.id, type: discord.SelectMenuDefaultValueType.Channel }))
+            });
+        }
+        else if (this.data.type == "mentionable") {
+            if (!this.data.mentionables || this.data.mentionables.length < 1)
+                throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please provide at least one role/user option using setMentionables().");
+            return new discord.MentionableSelectMenuBuilder({
+                ...genericOpts,
+                defaultValues: this.data.mentionables.map((m) => (m instanceof discord.User ? { id: m.id, type: discord.SelectMenuDefaultValueType.User } : { id: m.id, type: discord.SelectMenuDefaultValueType.Role }))
+            });
+        }
+        else
+            throw new ODSystemError("ODDropdownComponent:build('" + this.id.value + "') => Please set the dropdown type to one of the following: string, user, role, channel, mentionable.");
+    }
+    /**Set the custom id of this dropdown. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Set the type of this dropdown. */
+    setType(type) {
+        this.data.type = type;
+        return this;
+    }
+    /**Set the minimum selection amount of this dropdown. */
+    setMinValues(amount) {
+        this.data.minValues = amount ?? undefined;
+        return this;
+    }
+    /**Set the maximum selection amount of this dropdown. */
+    setMaxValues(amount) {
+        this.data.maxValues = amount ?? undefined;
+        return this;
+    }
+    /**Set the placeholder of this dropdown. */
+    setPlaceholder(placeholder) {
+        this.data.placeholder = placeholder ?? undefined;
+        return this;
+    }
+    /**Disable this dropdown. */
+    setDisabled(disabled) {
+        this.data.disabled = disabled;
+        return this;
+    }
+    /**Set the available channel types of this dropdown. */
+    setChannelTypes(channelTypes) {
+        this.data.channelTypes = channelTypes;
+        return this;
+    }
+    /**Set the options of this dropdown (when `type == "string"`) */
+    setOptions(options) {
+        this.data.options = options;
+        return this;
+    }
+    /**Set the users of this dropdown (when `type == "user"`) */
+    setUsers(users) {
+        this.data.users = users;
+        return this;
+    }
+    /**Set the roles of this dropdown (when `type == "role"`) */
+    setRoles(roles) {
+        this.data.roles = roles;
+        return this;
+    }
+    /**Set the channels of this dropdown (when `type == "channel"`) */
+    setChannels(channels) {
+        this.data.channels = channels;
+        return this;
+    }
+    /**Set the mentionables of this dropdown (when `type == "mentionable"`) */
+    setMentionables(mentionables) {
+        this.data.mentionables = mentionables;
+        return this;
+    }
+}
+/**## ODRadioGroupComponent `class`
+ * A radio group component which renders an interactive radio group input inside a modal.
+ */
+export class ODRadioGroupComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { required: false, options: [], ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (!this.data.options || this.data.options.length < 2)
+            throw new ODSystemError("ODRadioGroupComponent:build('" + this.id.value + "') => Please provide at least 2 radio options using setOptions().");
+        return new discord.RadioGroupBuilder({
+            custom_id: this.data.customId,
+            required: this.data.required,
+            options: this.data.options
+        });
+    }
+    /**Set the custom id of this radio group. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Mark this radio group as required (At least one option must be selected). */
+    setRequired(required) {
+        this.data.required = required;
+        return this;
+    }
+    /**Set the available radio options (min 2, max 10) */
+    setOptions(options) {
+        this.data.options = options;
+        return this;
+    }
+}
+/**## ODCheckboxGroupComponent `class`
+ * A checkbox group component which renders an interactive checkbox group input inside a modal.
+ */
+export class ODCheckboxGroupComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { required: false, options: [], ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (!this.data.options || this.data.options.length < 2)
+            throw new ODSystemError("ODCheckboxGroupComponent:build('" + this.id.value + "') => Please provide at least 2 radio options using setOptions().");
+        return new discord.CheckboxGroupBuilder({
+            custom_id: this.data.customId,
+            required: this.data.required,
+            options: this.data.options,
+            min_values: this.data.minValues,
+            max_values: this.data.maxValues
+        });
+    }
+    /**Set the custom id of this checkbox group. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Mark this checkbox group as required (At least one option must be selected). */
+    setRequired(required) {
+        this.data.required = required;
+        return this;
+    }
+    /**Set the available checkbox options (min 2, max 10) */
+    setOptions(options) {
+        this.data.options = options;
+        return this;
+    }
+    /**Set the minimum amount of selected checkboxes. */
+    setMinValues(amount) {
+        this.data.minValues = amount ?? undefined;
+        return this;
+    }
+    /**Set the maximum amount of selected checkboxes. */
+    setMaxValues(amount) {
+        this.data.maxValues = amount ?? undefined;
+        return this;
+    }
+}
+/**## ODCheckboxComponent `class`
+ * A checkbox component which renders an interactive checkbox input inside a modal.
+ * The label & description should be set via an `ODLabelComponent`
+ */
+export class ODCheckboxComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { default: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        return new discord.CheckboxBuilder({
+            custom_id: this.data.customId,
+            default: this.data.default
+        });
+    }
+    /**Set the custom id of this checkbox. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Mark this checkbox as enabled by default. */
+    setDefault(enabledByDefault) {
+        this.data.default = enabledByDefault;
+        return this;
+    }
+}
+/**## ODFileUploadComponent `class`
+ * A file upload component which allows users to upload one or multiple files inside a modal.
+ * The label & description should be set via an `ODLabelComponent`
+ */
+export class ODFileUploadComponent extends ODComponent {
+    constructor(id, data) {
+        const initData = { required: false, ...data };
+        super(id, initData);
+    }
+    async build() {
+        if (typeof this.data.minAmount == "number" && !(this.data.minAmount >= 0 && this.data.minAmount <= 10))
+            throw new ODSystemError("ODFileUploadComponent:build('" + this.id.value + "') => Minimum upload amount must be a value from 0 to 10.");
+        if (typeof this.data.maxAmount == "number" && !(this.data.maxAmount >= 1 && this.data.maxAmount <= 10))
+            throw new ODSystemError("ODFileUploadComponent:build('" + this.id.value + "') => Maximum upload amount must be a value from 1 to 10.");
+        return new discord.FileUploadBuilder({
+            custom_id: this.data.customId,
+            required: this.data.required,
+            min_values: this.data.minAmount,
+            max_values: this.data.maxAmount
+        });
+    }
+    /**Set the custom id of this dropdown. */
+    setCustomId(id) {
+        this.data.customId = id ?? undefined;
+        return this;
+    }
+    /**Mark this file upload as required. */
+    setRequired(required) {
+        this.data.required = required;
+        return this;
+    }
+    /**Set the minimum amount of files to upload (0-10). */
+    setMinAmount(amount) {
+        this.data.minAmount = amount ?? undefined;
+        return this;
+    }
+    /**Set the maximum amount of files to upload (1-10). */
+    setMaxAmount(amount) {
+        this.data.maxAmount = amount ?? undefined;
+        return this;
+    }
+}