

bgcolorClasses = ["bg-primary", "bg-secondary", "bg-success", "bg-danger", "bg-warning", "bg-info", "bg-body-secondary", "bg-dark", "bg-white"]

bgcolorSelectOptions =
    [{
        value: "Default",
        text: ""
    },
    {
        value: "bg-primary",
        text: "Primary"
    }, {
        value: "bg-secondary",
        text: "Secondary"
    }, {
        value: "bg-success",
        text: "Success"
    }, {
        value: "bg-danger",
        text: "Danger"
    }, {
        value: "bg-warning",
        text: "Warning"
    }, {
        value: "bg-info",
        text: "Info"
    }, {
        value: "bg-body-secondary",
        text: "Light"
    }, {
        value: "bg-dark",
        text: "Dark"
    }, {
        value: "bg-white",
        text: "White"
    }];

function changeNodeName(node, newNodeName) {
    var newNode;
    newNode = document.createElement(newNodeName);
    attributes = node.get(0).attributes;

    for (i = 0, len = attributes.length; i < len; i++) {
        newNode.setAttribute(attributes[i].nodeName, attributes[i].nodeValue);
    }

    $(newNode).append($(node).contents());
    $(node).replaceWith(newNode);

    return newNode;
}

var base_sort = 100;//start sorting for base component from 100 to allow extended properties to be first
var style_section = 'style';
var advanced_section = 'advanced';

Vvveb.Components.add("_base", {
    name: "Element",
    properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        data: { header: "General" },
    }, {
        name: "Id",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline: false,
        col: 6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline: false,
        col: 6,
        inputtype: TextInput
    }
    ]
});

//display
Vvveb.Components.extend("_base", "_base", {
    properties: [
        {
            key: "display_header",
            inputtype: SectionInput,
            name: false,
            sort: base_sort++,
            section: style_section,
            data: { header: "Display" },
        }, {
            //linked styles notice message
            name: "",
            key: "linked_styles_check",
            sort: base_sort++,
            section: style_section,
            inline: false,
            col: 12,
            inputtype: NoticeInput,
            data: {
                type: 'warning',
                title: (window.__ ? window.__("editor.style.linked_styles_title", "Linked styles") : 'Linked styles'),
                text: (function () {
                    var t1 = window.__ ? window.__("editor.style.linked_styles_text_1", "This element shares styles with other") : "This element shares styles with other";
                    var t2 = window.__ ? window.__("editor.style.linked_styles_text_2", "elements") : "elements";
                    var t3 = window.__ ? window.__("editor.style.linked_styles_text_3", "to apply styles") : "to apply styles";
                    var t4 = window.__ ? window.__("editor.style.linked_styles_text_4", "only for this element") : "only for this element";
                    var t5 = window.__ ? window.__("editor.style.linked_styles_text_5", "enter a unique id eg:") : "enter a unique id eg:";
                    var t6 = window.__ ? window.__("editor.style.linked_styles_text_6", "Content > General > Id") : "Content > General > Id";
                    return t1 + ' <a class="linked-elements-hover" href="#"><b class="elements-count">4</b> ' + t2 + '</a>, ' + t3 + ' <b>' + t4 + '</b> ' + t5 + ' <i>marketing-heading</i> in in <br/>' +
                        '<a class="id-input" href="#content-tab" role="tab" aria-controls="components" aria-selected="false" href="#content-tab">' + t6 + '</a>.<br/>' +
                        '<span class="text-muted small"></span>';
                })(),
            },
            afterInit: function (node, inputElement) {
                var selector = Vvveb.StyleManager.getSelectorForElement(node);
                var elements = $(selector, window.FrameDocument);

                if (elements.length <= 1) {
                    inputElement.hide();
                } else {
                    $(".elements-count", inputElement).html(elements.length);
                    $(".text-muted", inputElement).html(selector);

                    $(".id-input", inputElement).click(function () {
                        $(".content-tab a").each(function () {
                            this.click();
                        });

                        setTimeout(function () { $("[name=id]").trigger("focus") }, 700);

                        return false;
                    });

                    $(".linked-elements-hover", inputElement).
                        on("mouseenter", function () {
                            elements.css("outline", "2px dotted blue");
                        }).
                        on("mouseleave", function () {
                            elements.css("outline", "");
                        });
                }
            },
        }, {
            name: window.__ ? window.__("editor.style.display", "Display") : "Display",
            key: "display",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: SelectInput,
            validValues: ["block", "inline", "inline-block", "none"],
            data: {
                options: [{
                    value: "block",
                    text: "Block"
                }, {
                    value: "inline",
                    text: "Inline"
                }, {
                    value: "inline-block",
                    text: "Inline Block"
                }, {
                    value: "inline-block",
                    text: "Inline Block"
                }, {
                    value: "flex",
                    text: "Flex"
                }, {
                    value: "inline-flex",
                    text: "Inline Flex"
                }, {
                    value: "grid",
                    text: "Grid"
                }, {
                    value: "inline-grid",
                    text: "Inline grid"
                }, {
                    value: "table",
                    text: "Table"
                }, {
                    value: "table-row",
                    text: "Table Row"
                }, {
                    value: "list-item",
                    text: "List Item"
                }, {
                    value: "inherit",
                    text: "Inherit"
                }, {
                    value: "initial",
                    text: "Initial"
                }, {
                    value: "none",
                    text: "none"
                }]
            }
        }, {
            name: window.__ ? window.__("editor.style.position", "Position") : "Position",
            key: "position",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: SelectInput,
            validValues: ["static", "fixed", "relative", "absolute"],
            data: {
                options: [{
                    value: "static",
                    text: "Static"
                }, {
                    value: "fixed",
                    text: "Fixed"
                }, {
                    value: "relative",
                    text: "Relative"
                }, {
                    value: "absolute",
                    text: "Absolute"
                }]
            }
        }, {
            name: window.__ ? window.__("editor.style.top", "Top") : "Top",
            key: "top",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: window.__ ? window.__("editor.style.left", "Left") : "Left",
            key: "left",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: window.__ ? window.__("editor.style.bottom", "Bottom") : "Bottom",
            key: "bottom",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: window.__ ? window.__("editor.style.right", "Right") : "Right",
            key: "right",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            parent: "",
            inputtype: CssUnitInput
        }, {
            name: window.__ ? window.__("editor.style.float", "Float") : "Float",
            key: "float",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: false,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "none",
                    icon: "la la-times",
                    //text: "None",
                    title: "None",
                    checked: true,
                }, {
                    value: "left",
                    //text: "Left",
                    title: "Left",
                    icon: "la la-align-left",
                    checked: false,
                }, {
                    value: "right",
                    //text: "Right",
                    title: "Right",
                    icon: "la la-align-right",
                    checked: false,
                }],
            }
        }, {
            name: window.__ ? window.__("editor.style.opacity", "Opacity") : "Opacity",
            key: "opacity",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: false,
            parent: "",
            inputtype: RangeInput,
            data: {
                max: 1, //max zoom level
                min: 0,
                step: 0.1
            },
        }, {
            name: window.__ ? window.__("editor.style.background_color", "Background Color") : "Background Color",
            key: "background-color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }, {
            name: window.__ ? window.__("editor.style.text_color", "Text Color") : "Text Color",
            key: "color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }]
});

//Typography
var ComponentBaseTypography = {
    properties: [
        {
            key: "typography_header",
            inputtype: SectionInput,
            name: false,
            sort: base_sort++,
            section: style_section,
            data: { header: (window.__ ? window.__("editor.typography", "Typography") : "Typography") },

        }, {
            name: (window.__ ? window.__("editor.font_size", "Font size") : "Font size"),
            key: "font-size",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: CssUnitInput
        }, {
            name: (window.__ ? window.__("editor.font_weight", "Font weight") : "Font weight"),
            key: "font-weight",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "Default"
                }, {
                    value: "100",
                    text: "Thin"
                }, {
                    value: "200",
                    text: "Extra-Light"
                }, {
                    value: "300",
                    text: "Light"
                }, {
                    value: "400",
                    text: "Normal"
                }, {
                    value: "500",
                    text: "Medium"
                }, {
                    value: "600",
                    text: "Semi-Bold"
                }, {
                    value: "700",
                    text: "Bold"
                }, {
                    value: "800",
                    text: "Extra-Bold"
                }, {
                    value: "900",
                    text: "Ultra-Bold"
                }],
            }
        }, {
            name: (window.__ ? window.__("editor.font_family", "Font family") : "Font family"),
            key: "font-family",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: false,
            inputtype: SelectInput,
            data: {
                options: fontList
            }
        }, {
            name: (window.__ ? window.__("editor.text_align", "Text align") : "Text align"),
            key: "text-align",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: false,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "",
                    icon: "la la-times",
                    //text: "None",
                    title: "None",
                    checked: true,
                }, {
                    value: "left",
                    //text: "Left",
                    title: "Left",
                    icon: "la la-align-left",
                    checked: false,
                }, {
                    value: "center",
                    //text: "Center",
                    title: "Center",
                    icon: "la la-align-center",
                    checked: false,
                }, {
                    value: "right",
                    //text: "Right",
                    title: "Right",
                    icon: "la la-align-right",
                    checked: false,
                }, {
                    value: "justify",
                    //text: "justify",
                    title: "Justify",
                    icon: "la la-align-justify",
                    checked: false,
                }],
            },
        }, {
            name: (window.__ ? window.__("editor.line_height", "Line height") : "Line height"),
            key: "line-height",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: CssUnitInput
        }, {
            name: (window.__ ? window.__("editor.letter_spacing", "Letter spacing") : "Letter spacing"),
            key: "letter-spacing",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: false,
            inputtype: CssUnitInput
        }, {
            name: (window.__ ? window.__("editor.text_decoration", "Text decoration") : "Text decoration"),
            key: "text-decoration-line",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 12,
            inline: false,
            inputtype: RadioButtonInput,
            data: {
                extraclass: "btn-group-sm btn-group-fullwidth",
                options: [{
                    value: "none",
                    icon: "la la-times",
                    //text: "None",
                    title: "None",
                    checked: true,
                }, {
                    value: "underline",
                    //text: "Left",
                    title: "underline",
                    icon: "la la-long-arrow-alt-down",
                    checked: false,
                }, {
                    value: "overline",
                    //text: "Right",
                    title: "overline",
                    icon: "la la-long-arrow-alt-up",
                    checked: false,
                }, {
                    value: "line-through",
                    //text: "Right",
                    title: "Line Through",
                    icon: "la la-strikethrough",
                    checked: false,
                }, {
                    value: "underline overline",
                    //text: "justify",
                    title: "Underline Overline",
                    icon: "la la-arrows-alt-v",
                    checked: false,
                }],
            },
        }, {
            name: (window.__ ? window.__("editor.decoration_color", "Decoration Color") : "Decoration Color"),
            key: "text-decoration-color",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            htmlAttr: "style",
            inputtype: ColorInput,
        }, {
            name: (window.__ ? window.__("editor.decoration_style", "Decoration style") : "Decoration style"),
            key: "text-decoration-style",
            htmlAttr: "style",
            sort: base_sort++,
            section: style_section,
            col: 6,
            inline: true,
            inputtype: SelectInput,
            data: {
                options: [{
                    value: "",
                    text: "Default"
                }, {
                    value: "solid",
                    text: "Solid"
                }, {
                    value: "wavy",
                    text: "Wavy"
                }, {
                    value: "dotted",
                    text: "Dotted"
                }, {
                    value: "dashed",
                    text: "Dashed"
                }, {
                    value: "double",
                    text: "Double"
                }],
            }
        }]
}

Vvveb.Components.extend("_base", "_base", ComponentBaseTypography);

//Size
var ComponentBaseSize = {
    properties: [{
        key: "size_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.size", "Size") : "Size"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.width", "Width") : "Width"),
        key: "width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.height", "Height") : "Height"),
        key: "height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.min_width", "Min Width") : "Min Width"),
        key: "min-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.min_height", "Min Height") : "Min Height"),
        key: "min-height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.max_width", "Max Width") : "Max Width"),
        key: "max-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.max_height", "Max Height") : "Max Height"),
        key: "max-height",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }]
}

Vvveb.Components.extend("_base", "_base", ComponentBaseSize);

//Margin
var ComponentBaseMargin = {
    properties: [{
        key: "margins_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.margin", "Margin") : "Margin"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.top", "Top") : "Top"),
        key: "margin-top",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.right", "Right") : "Right"),
        key: "margin-right",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.bottom", "Bottom") : "Bottom"),
        key: "margin-bottom",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.left", "Left") : "Left"),
        key: "margin-left",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }]
}

Vvveb.Components.extend("_base", "_base", ComponentBaseMargin);

//Padding
var ComponentBasePadding = {

    properties: [{
        key: "paddings_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.padding", "Padding") : "Padding"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.top", "Top") : "Top"),
        key: "padding-top",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.right", "Right") : "Right"),
        key: "padding-right",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.bottom", "Bottom") : "Bottom"),
        key: "padding-bottom",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.left", "Left") : "Left"),
        key: "padding-left",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }]
}

Vvveb.Components.extend("_base", "_base", ComponentBasePadding);


//Border
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "border_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.border", "Border") : "Border"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.style_label", "Style") : "Style"),
        key: "border-style",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 12,
        inline: false,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "Default"
            }, {
                value: "solid",
                text: "Solid"
            }, {
                value: "dotted",
                text: "Dotted"
            }, {
                value: "dashed",
                text: "Dashed"
            }],
        }
    }, {
        name: (window.__ ? window.__("editor.width", "Width") : "Width"),
        key: "border-width",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.color", "Color") : "Color"),
        key: "border-color",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        htmlAttr: "style",
        inputtype: ColorInput,
    }]
});



//Border radius
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "border_radius_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.border_radius", "Border radius") : "Border radius"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.top_left", "Top Left") : "Top Left"),
        key: "border-top-left-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.top_right", "Top Right") : "Top Right"),
        key: "border-top-right-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.bottom_left", "Bottom Left") : "Bottom Left"),
        key: "border-bottom-left-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }, {
        name: (window.__ ? window.__("editor.bottom_right", "Bottom Right") : "Bottom Right"),
        key: "border-bottom-right-radius",
        htmlAttr: "style",
        sort: base_sort++,
        section: style_section,
        col: 6,
        inline: false,
        inputtype: CssUnitInput
    }]
});

//Background image
Vvveb.Components.extend("_base", "_base", {
    properties: [{
        key: "background_image_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: style_section,
        data: { header: (window.__ ? window.__("editor.background_image", "Background Image") : "Background Image"), expanded: false },
    }, {
        name: (window.__ ? window.__("editor.image", "Image") : "Image"),
        key: "Image",
        sort: base_sort++,
        section: style_section,
        //htmlAttr: "style",
        inputtype: ImageInput,

        init: function (node) {
            var image = $(node).css("background-image").replace(/url\(['"]?([^"\)$]+?)['"]?\).*/, '$1');
            return image;
        },

        onChange: function (node, value) {

            $(node).css('background-image', 'url(' + value + ')');

            return node;
        }

    }, {
        name: (window.__ ? window.__("editor.repeat", "Repeat") : "Repeat"),
        key: "background-repeat",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "Default"
            }, {
                value: "repeat-x",
                text: "repeat-x"
            }, {
                value: "repeat-y",
                text: "repeat-y"
            }, {
                value: "no-repeat",
                text: "no-repeat"
            }],
        }
    }, {
        name: (window.__ ? window.__("editor.size", "Size") : "Size"),
        key: "background-size",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "Default"
            }, {
                value: "contain",
                text: "contain"
            }, {
                value: "cover",
                text: "cover"
            }],
        }
    }, {
        name: (window.__ ? window.__("editor.position_x", "Position x") : "Position x"),
        key: "background-position-x",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        col: 6,
        inline: true,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "Default"
            }, {
                value: "center",
                text: "center"
            }, {
                value: "right",
                text: "right"
            }, {
                value: "left",
                text: "left"
            }],
        }
    }, {
        name: (window.__ ? window.__("editor.position_y", "Position y") : "Position y"),
        key: "background-position-y",
        sort: base_sort++,
        section: style_section,
        htmlAttr: "style",
        col: 6,
        inline: true,
        inputtype: SelectInput,
        data: {
            options: [{
                value: "",
                text: "Default"
            }, {
                value: "center",
                text: "center"
            }, {
                value: "top",
                text: "top"
            }, {
                value: "bottom",
                text: "bottom"
            }],
        }
    }]
});


//Device visibility
var ComponentDeviceVisibility = {
    properties: [{
        key: "visibility_header",
        inputtype: SectionInput,
        name: false,
        sort: base_sort++,
        section: advanced_section,
        data: { header: (window.__ ? window.__("editor.device_visibility.header", "Hide based on device screen width") : "Hide based on device screen width") },
    }, {
        name: (window.__ ? window.__("editor.device_visibility.xs", "Extra small devices") : "Extra small devices"),
        key: "hidexs",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-xs-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-xs-none",
            off: ""
        }
    }, {
        name: (window.__ ? window.__("editor.device_visibility.sm", "Small devices") : "Small devices"),
        key: "hidesm",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-sm-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-sm-none",
            off: ""
        }
    }, {
        name: (window.__ ? window.__("editor.device_visibility.md", "Medium devices") : "Medium devices"),
        key: "hidemd",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-md-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-md-none",
            off: ""
        }
    }, {
        name: (window.__ ? window.__("editor.device_visibility.lg", "Large devices") : "Large devices"),
        key: "hidelg",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-lg-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-lg-none",
            off: ""
        }
    }, {
        name: (window.__ ? window.__("editor.device_visibility.xl", "Xl devices") : "Xl devices"),
        key: "hidexl",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-xl-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-xl-none",
            off: ""
        }
    }, {
        name: (window.__ ? window.__("editor.device_visibility.xxl", "Xxl devices") : "Xxl devices"),
        key: "hidexxl",
        col: 6,
        inline: true,
        sort: base_sort++,
        section: advanced_section,
        htmlAttr: "class",
        validValues: ["d-xxl-none"],
        inputtype: ToggleInput,
        data: {
            on: "d-xxl-none",
            off: ""
        }
    }]
};

Vvveb.Components.extend("_base", "_base", ComponentDeviceVisibility);


Vvveb.Components.add("config/bootstrap", {
    name: "Bootstrap Variables",
    beforeInit: function (node) {
        properties = [];
        var i = 0;
        var j = 0;

        let cssVars = Vvveb.ColorPaletteManager.getAllCSSVariableNames(window.FrameDocument.styleSheets/*, ":root"*/);

        for (type in cssVars) {
            properties.push({
                key: "cssVars" + type,
                inputtype: SectionInput,
                name: type,
                sort: base_sort++,
                data: { header: type[0].toUpperCase() + type.slice(1) },
            });

            for (selector in cssVars[type]) {

                let friendlyName = selector.replaceAll(/--bs-/g, "").replaceAll("-", " ").trim();
                friendlyName = friendlyName[0].toUpperCase() + friendlyName.slice(1);

                let value = cssVars[type][selector];
                let input;

                data = { selector, type: value.type, step: "any" };

                if (value.type == "color") {
                    input = ColorInput;
                } else if (value.type == "font") {
                    input = SelectInput;
                    data.options = fontList;
                } else if (value.type == "dimensions") {
                    input = CssUnitInput;
                }

                i++;
                properties.push({
                    name: friendlyName,
                    key: "cssvar" + i,
                    defaultValue: value.value,
                    //index: i - 1,
                    columnNode: this,
                    col: (value.type == "font" || value.type == "dimensions") ? 12 : 4,
                    inline: true,
                    section: advanced_section,
                    inputtype: input,
                    data: data,
                    onChange: function (node, value, input) {

                        if (this.data.type == "font") {
                            let option = input.options[input.selectedIndex];
                            Vvveb.FontsManager.addFont(option.dataset.provider, value, node[0]);
                        }

                        Vvveb.StyleManager.setStyle(":root", this.data.selector, value);

                        return node;
                    },
                });
            }
        }

        this.properties = properties;
        return node;
    },
    properties: [],
});
