@toototech/webbuilder-plugins 0.1.0

package/dist/basic/registries/navigation/navbar/factories.d.ts

@@ -0,0 +1,848 @@
+import { type NavGroupMenuType } from './constants.js';
+export declare function uiEl(tagName: string, classes: string[], extra?: Record<string, unknown>): {
+    tagName: string;
+    classes: string[];
+    selectable: boolean;
+    hoverable: boolean;
+    draggable: boolean;
+    droppable: boolean;
+    layerable: boolean;
+    highlightable: boolean;
+};
+export declare function makeLink(text: string, href?: string, cta?: boolean): {
+    type: string;
+    tagName: string;
+    attributes: {
+        'data-cta'?: string | undefined;
+        href: string;
+    };
+    classes: string[];
+    components: {
+        type: string;
+        content: string;
+    }[];
+};
+export declare function makeBurger(): {
+    components: {
+        tagName: string;
+        classes: string[];
+        selectable: boolean;
+        hoverable: boolean;
+        draggable: boolean;
+        droppable: boolean;
+        layerable: boolean;
+        highlightable: boolean;
+    }[];
+    tagName: string;
+    classes: string[];
+    selectable: boolean;
+    hoverable: boolean;
+    draggable: boolean;
+    droppable: boolean;
+    layerable: boolean;
+    highlightable: boolean;
+};
+export declare function makeDropdownItem(text: string, href?: string): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    attributes: {
+        href: string;
+    };
+    components: {
+        type: string;
+        content: string;
+    }[];
+};
+export declare function makeDropdown(items?: Array<{
+    text: string;
+    href?: string;
+}>): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    components: {
+        tagName: string;
+        classes: string[];
+        draggable: boolean;
+        droppable: boolean;
+        copyable: boolean;
+        removable: boolean;
+        selectable: boolean;
+        hoverable: boolean;
+        layerable: boolean;
+        highlightable: boolean;
+        components: {
+            type: string;
+            tagName: string;
+            classes: string[];
+            attributes: {
+                href: string;
+            };
+            components: {
+                type: string;
+                content: string;
+            }[];
+        }[];
+    }[];
+};
+export declare function makeMegaItem(text: string, href?: string, options?: {
+    imageSrc?: string;
+    imageAlt?: string;
+}): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    attributes: {
+        href: string;
+        'data-mega-image-src': string;
+        'data-mega-image-alt': string;
+    };
+    components: {
+        tagName: string;
+        classes: string[];
+        draggable: boolean;
+        droppable: boolean;
+        copyable: boolean;
+        removable: boolean;
+        selectable: boolean;
+        hoverable: boolean;
+        layerable: boolean;
+        components: {
+            type: string;
+            content: string;
+        }[];
+    }[];
+};
+export declare function makeMegaCol(title: string, items?: Array<{
+    text: string;
+    href?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+}>): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    components: ({
+        type: string;
+        tagName: string;
+        classes: string[];
+        attributes: {
+            href: string;
+            'data-mega-image-src': string;
+            'data-mega-image-alt': string;
+        };
+        components: {
+            tagName: string;
+            classes: string[];
+            draggable: boolean;
+            droppable: boolean;
+            copyable: boolean;
+            removable: boolean;
+            selectable: boolean;
+            hoverable: boolean;
+            layerable: boolean;
+            components: {
+                type: string;
+                content: string;
+            }[];
+        }[];
+    } | {
+        tagName: string;
+        classes: string[];
+        draggable: boolean;
+        droppable: boolean;
+        copyable: boolean;
+        removable: boolean;
+        selectable: boolean;
+        hoverable: boolean;
+        layerable: boolean;
+        components: {
+            type: string;
+            content: string;
+        }[];
+    })[];
+};
+export declare function makeMegaFooterLink(text: string, href?: string): {
+    tagName: string;
+    classes: string[];
+    attributes: {
+        href: string;
+    };
+    components: ({
+        type: string;
+        content: string;
+        tagName?: undefined;
+        classes?: undefined;
+        draggable?: undefined;
+        droppable?: undefined;
+        copyable?: undefined;
+        removable?: undefined;
+        selectable?: undefined;
+        hoverable?: undefined;
+        layerable?: undefined;
+        components?: undefined;
+    } | {
+        tagName: string;
+        classes: string[];
+        draggable: boolean;
+        droppable: boolean;
+        copyable: boolean;
+        removable: boolean;
+        selectable: boolean;
+        hoverable: boolean;
+        layerable: boolean;
+        components: {
+            type: string;
+            content: string;
+        }[];
+        type?: undefined;
+        content?: undefined;
+    })[];
+};
+export declare function makeMegaRightImage(src?: string, alt?: string): {
+    tagName: string;
+    classes: string[];
+    attributes: {
+        src: string;
+        alt: string;
+        width: string;
+        height: string;
+    };
+    draggable: boolean;
+    copyable: boolean;
+    removable: boolean;
+};
+export declare function makeMega(options?: {
+    title?: string;
+    items?: Array<{
+        text: string;
+        href?: string;
+        imageSrc?: string;
+        imageAlt?: string;
+    }>;
+    footerLinkText?: string;
+    footerLinkHref?: string;
+    imageSrc?: string;
+    imageAlt?: string;
+}): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    components: {
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: ({
+            type: string;
+            tagName: string;
+            classes: string[];
+            components: {
+                tagName: string;
+                classes: string[];
+                draggable: boolean;
+                droppable: boolean;
+                copyable: boolean;
+                removable: boolean;
+                selectable: boolean;
+                hoverable: boolean;
+                layerable: boolean;
+                components: ({
+                    type: string;
+                    tagName: string;
+                    classes: string[];
+                    components: ({
+                        type: string;
+                        tagName: string;
+                        classes: string[];
+                        attributes: {
+                            href: string;
+                            'data-mega-image-src': string;
+                            'data-mega-image-alt': string;
+                        };
+                        components: {
+                            tagName: string;
+                            classes: string[];
+                            draggable: boolean;
+                            droppable: boolean;
+                            copyable: boolean;
+                            removable: boolean;
+                            selectable: boolean;
+                            hoverable: boolean;
+                            layerable: boolean;
+                            components: {
+                                type: string;
+                                content: string;
+                            }[];
+                        }[];
+                    } | {
+                        tagName: string;
+                        classes: string[];
+                        draggable: boolean;
+                        droppable: boolean;
+                        copyable: boolean;
+                        removable: boolean;
+                        selectable: boolean;
+                        hoverable: boolean;
+                        layerable: boolean;
+                        components: {
+                            type: string;
+                            content: string;
+                        }[];
+                    })[];
+                } | {
+                    tagName: string;
+                    classes: string[];
+                    attributes: {
+                        href: string;
+                    };
+                    components: ({
+                        type: string;
+                        content: string;
+                        tagName?: undefined;
+                        classes?: undefined;
+                        draggable?: undefined;
+                        droppable?: undefined;
+                        copyable?: undefined;
+                        removable?: undefined;
+                        selectable?: undefined;
+                        hoverable?: undefined;
+                        layerable?: undefined;
+                        components?: undefined;
+                    } | {
+                        tagName: string;
+                        classes: string[];
+                        draggable: boolean;
+                        droppable: boolean;
+                        copyable: boolean;
+                        removable: boolean;
+                        selectable: boolean;
+                        hoverable: boolean;
+                        layerable: boolean;
+                        components: {
+                            type: string;
+                            content: string;
+                        }[];
+                        type?: undefined;
+                        content?: undefined;
+                    })[];
+                })[];
+            }[];
+        } | {
+            type: string;
+            tagName: string;
+            classes: string[];
+            components: {
+                tagName: string;
+                classes: string[];
+                attributes: {
+                    src: string;
+                    alt: string;
+                    width: string;
+                    height: string;
+                };
+                draggable: boolean;
+                copyable: boolean;
+                removable: boolean;
+            }[];
+        })[];
+    }[];
+};
+export declare function makeNavGroup(label: string, menuType?: NavGroupMenuType, options?: {
+    dropdownItems?: Array<{
+        text: string;
+        href?: string;
+    }>;
+    megaTitle?: string;
+    megaItems?: Array<{
+        text: string;
+        href?: string;
+        imageSrc?: string;
+        imageAlt?: string;
+    }>;
+    megaFooterLinkText?: string;
+    megaFooterLinkHref?: string;
+    megaImageSrc?: string;
+    megaImageAlt?: string;
+}): {
+    type: string;
+    tagName: string;
+    classes: string[];
+    ngLabel: string;
+    ngType: NavGroupMenuType;
+    components: ({
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: {
+            tagName: string;
+            classes: string[];
+            draggable: boolean;
+            droppable: boolean;
+            copyable: boolean;
+            removable: boolean;
+            selectable: boolean;
+            hoverable: boolean;
+            layerable: boolean;
+            highlightable: boolean;
+            components: {
+                type: string;
+                tagName: string;
+                classes: string[];
+                attributes: {
+                    href: string;
+                };
+                components: {
+                    type: string;
+                    content: string;
+                }[];
+            }[];
+        }[];
+    } | {
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: {
+            type: string;
+            tagName: string;
+            classes: string[];
+            components: ({
+                type: string;
+                tagName: string;
+                classes: string[];
+                components: {
+                    tagName: string;
+                    classes: string[];
+                    draggable: boolean;
+                    droppable: boolean;
+                    copyable: boolean;
+                    removable: boolean;
+                    selectable: boolean;
+                    hoverable: boolean;
+                    layerable: boolean;
+                    components: ({
+                        type: string;
+                        tagName: string;
+                        classes: string[];
+                        components: ({
+                            type: string;
+                            tagName: string;
+                            classes: string[];
+                            attributes: {
+                                href: string;
+                                'data-mega-image-src': string;
+                                'data-mega-image-alt': string;
+                            };
+                            components: {
+                                tagName: string;
+                                classes: string[];
+                                draggable: boolean;
+                                droppable: boolean;
+                                copyable: boolean;
+                                removable: boolean;
+                                selectable: boolean;
+                                hoverable: boolean;
+                                layerable: boolean;
+                                components: {
+                                    type: string;
+                                    content: string;
+                                }[];
+                            }[];
+                        } | {
+                            tagName: string;
+                            classes: string[];
+                            draggable: boolean;
+                            droppable: boolean;
+                            copyable: boolean;
+                            removable: boolean;
+                            selectable: boolean;
+                            hoverable: boolean;
+                            layerable: boolean;
+                            components: {
+                                type: string;
+                                content: string;
+                            }[];
+                        })[];
+                    } | {
+                        tagName: string;
+                        classes: string[];
+                        attributes: {
+                            href: string;
+                        };
+                        components: ({
+                            type: string;
+                            content: string;
+                            tagName?: undefined;
+                            classes?: undefined;
+                            draggable?: undefined;
+                            droppable?: undefined;
+                            copyable?: undefined;
+                            removable?: undefined;
+                            selectable?: undefined;
+                            hoverable?: undefined;
+                            layerable?: undefined;
+                            components?: undefined;
+                        } | {
+                            tagName: string;
+                            classes: string[];
+                            draggable: boolean;
+                            droppable: boolean;
+                            copyable: boolean;
+                            removable: boolean;
+                            selectable: boolean;
+                            hoverable: boolean;
+                            layerable: boolean;
+                            components: {
+                                type: string;
+                                content: string;
+                            }[];
+                            type?: undefined;
+                            content?: undefined;
+                        })[];
+                    })[];
+                }[];
+            } | {
+                type: string;
+                tagName: string;
+                classes: string[];
+                components: {
+                    tagName: string;
+                    classes: string[];
+                    attributes: {
+                        src: string;
+                        alt: string;
+                        width: string;
+                        height: string;
+                    };
+                    draggable: boolean;
+                    copyable: boolean;
+                    removable: boolean;
+                }[];
+            })[];
+        }[];
+    } | {
+        tagName: string;
+        classes: string[];
+        attributes: {
+            type: string;
+        };
+        selectable: boolean;
+        hoverable: boolean;
+        draggable: boolean;
+        droppable: boolean;
+        layerable: boolean;
+        highlightable: boolean;
+        components: ({
+            tagName: string;
+            classes: string[];
+            selectable: boolean;
+            hoverable: boolean;
+            draggable: boolean;
+            droppable: boolean;
+            layerable: boolean;
+            highlightable: boolean;
+        } | {
+            type: string;
+            content: string;
+        })[];
+    })[];
+};
+export declare function createNavbarStructure(): ({
+    tagName: string;
+    classes: string[];
+    selectable: boolean;
+    hoverable: boolean;
+    draggable: boolean;
+    droppable: boolean;
+    layerable: boolean;
+    highlightable: boolean;
+} | {
+    tagName: string;
+    classes: string[];
+    selectable: boolean;
+    hoverable: boolean;
+    draggable: boolean;
+    droppable: boolean;
+    copyable: boolean;
+    removable: boolean;
+    highlightable: boolean;
+    components: ({
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: ({
+            components: {
+                tagName: string;
+                classes: string[];
+                selectable: boolean;
+                hoverable: boolean;
+                draggable: boolean;
+                droppable: boolean;
+                layerable: boolean;
+                highlightable: boolean;
+            }[];
+            tagName: string;
+            classes: string[];
+            selectable: boolean;
+            hoverable: boolean;
+            draggable: boolean;
+            droppable: boolean;
+            layerable: boolean;
+            highlightable: boolean;
+        } | {
+            type: string;
+            tagName: string;
+            classes: string[];
+            attributes: {
+                href: string;
+            };
+            components: {
+                type: string;
+                tagName: string;
+                classes: string[];
+                attributes: {
+                    src: string;
+                    alt: string;
+                };
+                selectable: boolean;
+                hoverable: boolean;
+                draggable: boolean;
+                droppable: boolean;
+                layerable: boolean;
+                highlightable: boolean;
+            }[];
+        })[];
+    } | {
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: {
+            type: string;
+            tagName: string;
+            classes: string[];
+            components: ({
+                tagName: string;
+                classes: string[];
+                selectable: boolean;
+                hoverable: boolean;
+                draggable: boolean;
+                droppable: boolean;
+                layerable: boolean;
+                highlightable: boolean;
+            } | {
+                type: string;
+                tagName: string;
+                attributes: {
+                    'data-cta'?: string | undefined;
+                    href: string;
+                };
+                classes: string[];
+                components: {
+                    type: string;
+                    content: string;
+                }[];
+            } | {
+                type: string;
+                tagName: string;
+                classes: string[];
+                ngLabel: string;
+                ngType: NavGroupMenuType;
+                components: ({
+                    type: string;
+                    tagName: string;
+                    classes: string[];
+                    components: {
+                        tagName: string;
+                        classes: string[];
+                        draggable: boolean;
+                        droppable: boolean;
+                        copyable: boolean;
+                        removable: boolean;
+                        selectable: boolean;
+                        hoverable: boolean;
+                        layerable: boolean;
+                        highlightable: boolean;
+                        components: {
+                            type: string;
+                            tagName: string;
+                            classes: string[];
+                            attributes: {
+                                href: string;
+                            };
+                            components: {
+                                type: string;
+                                content: string;
+                            }[];
+                        }[];
+                    }[];
+                } | {
+                    type: string;
+                    tagName: string;
+                    classes: string[];
+                    components: {
+                        type: string;
+                        tagName: string;
+                        classes: string[];
+                        components: ({
+                            type: string;
+                            tagName: string;
+                            classes: string[];
+                            components: {
+                                tagName: string;
+                                classes: string[];
+                                draggable: boolean;
+                                droppable: boolean;
+                                copyable: boolean;
+                                removable: boolean;
+                                selectable: boolean;
+                                hoverable: boolean;
+                                layerable: boolean;
+                                components: ({
+                                    type: string;
+                                    tagName: string;
+                                    classes: string[];
+                                    components: ({
+                                        type: string;
+                                        tagName: string;
+                                        classes: string[];
+                                        attributes: {
+                                            href: string;
+                                            'data-mega-image-src': string;
+                                            'data-mega-image-alt': string;
+                                        };
+                                        components: {
+                                            tagName: string;
+                                            classes: string[];
+                                            draggable: boolean;
+                                            droppable: boolean;
+                                            copyable: boolean;
+                                            removable: boolean;
+                                            selectable: boolean;
+                                            hoverable: boolean;
+                                            layerable: boolean;
+                                            components: {
+                                                type: string;
+                                                content: string;
+                                            }[];
+                                        }[];
+                                    } | {
+                                        tagName: string;
+                                        classes: string[];
+                                        draggable: boolean;
+                                        droppable: boolean;
+                                        copyable: boolean;
+                                        removable: boolean;
+                                        selectable: boolean;
+                                        hoverable: boolean;
+                                        layerable: boolean;
+                                        components: {
+                                            type: string;
+                                            content: string;
+                                        }[];
+                                    })[];
+                                } | {
+                                    tagName: string;
+                                    classes: string[];
+                                    attributes: {
+                                        href: string;
+                                    };
+                                    components: ({
+                                        type: string;
+                                        content: string;
+                                        tagName?: undefined;
+                                        classes?: undefined;
+                                        draggable?: undefined;
+                                        droppable?: undefined;
+                                        copyable?: undefined;
+                                        removable?: undefined;
+                                        selectable?: undefined;
+                                        hoverable?: undefined;
+                                        layerable?: undefined;
+                                        components?: undefined;
+                                    } | {
+                                        tagName: string;
+                                        classes: string[];
+                                        draggable: boolean;
+                                        droppable: boolean;
+                                        copyable: boolean;
+                                        removable: boolean;
+                                        selectable: boolean;
+                                        hoverable: boolean;
+                                        layerable: boolean;
+                                        components: {
+                                            type: string;
+                                            content: string;
+                                        }[];
+                                        type?: undefined;
+                                        content?: undefined;
+                                    })[];
+                                })[];
+                            }[];
+                        } | {
+                            type: string;
+                            tagName: string;
+                            classes: string[];
+                            components: {
+                                tagName: string;
+                                classes: string[];
+                                attributes: {
+                                    src: string;
+                                    alt: string;
+                                    width: string;
+                                    height: string;
+                                };
+                                draggable: boolean;
+                                copyable: boolean;
+                                removable: boolean;
+                            }[];
+                        })[];
+                    }[];
+                } | {
+                    tagName: string;
+                    classes: string[];
+                    attributes: {
+                        type: string;
+                    };
+                    selectable: boolean;
+                    hoverable: boolean;
+                    draggable: boolean;
+                    droppable: boolean;
+                    layerable: boolean;
+                    highlightable: boolean;
+                    components: ({
+                        tagName: string;
+                        classes: string[];
+                        selectable: boolean;
+                        hoverable: boolean;
+                        draggable: boolean;
+                        droppable: boolean;
+                        layerable: boolean;
+                        highlightable: boolean;
+                    } | {
+                        type: string;
+                        content: string;
+                    })[];
+                })[];
+            })[];
+        }[];
+    } | {
+        type: string;
+        tagName: string;
+        classes: string[];
+        components: ({
+            type: string;
+            tagName: string;
+            attributes: {
+                'data-cta'?: string | undefined;
+                href: string;
+            };
+            classes: string[];
+            components: {
+                type: string;
+                content: string;
+            }[];
+        } | {
+            type: string;
+        })[];
+    })[];
+})[];