@saltcorn/markup 1.4.1 → 1.4.2

package/dist/markup.test.js

@@ -0,0 +1,695 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const globals_1 = require("@jest/globals");
+const mjml_layout_1 = require("./mjml-layout");
+const tags = __importStar(require("./tags"));
+const mjml = __importStar(require("./mjml-tags"));
+const tabs_1 = __importDefault(require("./tabs"));
+const table_1 = __importDefault(require("./table"));
+// import index = require("./index");
+const index_1 = __importDefault(require("./index"));
+const builder_1 = __importDefault(require("./builder"));
+const { post_btn, post_delete_btn, post_dropdown_item, settingsDropdown, localeDate, } = index_1.default;
+const { a, input, div, ul, text, text_attr, i, hr, genericElement } = tags;
+(0, globals_1.describe)("tags", () => {
+    (0, globals_1.it)("renders", () => {
+        (0, globals_1.expect)(a({ href: "/" }, "Home")).toBe('<a href="/">Home</a>');
+        (0, globals_1.expect)(a({ href: "/" }, ["Home", " Sweet", " Home"])).toBe('<a href="/">Home Sweet Home</a>');
+        (0, globals_1.expect)(a({ href: "/", class: "centre" }, "Home")).toBe('<a href="/" class="centre">Home</a>');
+        (0, globals_1.expect)(input({ type: "text" })).toBe('<input type="text">');
+        (0, globals_1.expect)(div(5)).toBe("<div>5</div>");
+        (0, globals_1.expect)(div()).toBe("<div></div>");
+        (0, globals_1.expect)(div(null)).toBe("<div></div>");
+        (0, globals_1.expect)(div("Hello world")).toBe("<div>Hello world</div>");
+        (0, globals_1.expect)(div(["Hello world"])).toBe("<div>Hello world</div>");
+        (0, globals_1.expect)(i()).toBe("<i></i>");
+        (0, globals_1.expect)(hr()).toBe("<hr>");
+        (0, globals_1.expect)(div(["hello ", "world"])).toBe("<div>hello world</div>");
+        (0, globals_1.expect)(ul({ class: "foo" }, [false, "hello ", "world"])).toBe(`<ul class="foo">hello world</ul>`);
+        (0, globals_1.expect)(ul({ class: "foo" }, [["hello ", "world"]])).toBe(`<ul class="foo">hello world</ul>`);
+        (0, globals_1.expect)(i({ class: "fas fa-plus-square" })).toBe('<i class="fas fa-plus-square"></i>');
+        (0, globals_1.expect)(genericElement("div", { class: "foo" }, "Hello")).toBe('<div class="foo">Hello</div>');
+        (0, globals_1.expect)(genericElement("div", { onclick: `$("#bar").hide()` }, "Hello")).toBe('<div onclick="$(&quot;#bar&quot;).hide()">Hello</div>');
+    });
+    (0, globals_1.it)("class", () => {
+        (0, globals_1.expect)(div({ class: "foo" }, 5)).toBe('<div class="foo">5</div>');
+        (0, globals_1.expect)(div({ class: false }, 5)).toBe("<div>5</div>");
+        (0, globals_1.expect)(div({ class: "foo bar" }, 5)).toBe('<div class="foo bar">5</div>');
+        (0, globals_1.expect)(div({ class: ["foo", "bar"] }, 5)).toBe('<div class="foo bar">5</div>');
+        (0, globals_1.expect)(div({ class: ["foo", " "] }, 5)).toBe('<div class="foo  ">5</div>');
+        (0, globals_1.expect)(input({ class: ["foo", " "] })).toBe('<input class="foo  ">');
+        (0, globals_1.expect)(div({ class: ["foo bar", "", undefined, null, false, "baz"] }, 5)).toBe('<div class="foo bar baz">5</div>');
+        (0, globals_1.expect)(div({ class: [undefined, null, false] }, 5)).toBe("<div>5</div>");
+        (0, globals_1.expect)(hr({ class: "foo" })).toBe('<hr class="foo">');
+    });
+    (0, globals_1.it)("style", () => {
+        (0, globals_1.expect)(div({ style: "color:red;border:1px solid black" }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        (0, globals_1.expect)(div({ style: ["color:red", "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        (0, globals_1.expect)(div({ style: ["color:red", false, undefined, "border:1px solid black"] }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        (0, globals_1.expect)(div({ style: { color: "red", border: "1px solid black" } }, 5)).toBe('<div style="color:red;border:1px solid black">5</div>');
+        (0, globals_1.expect)(div({ style: { marginRight: "1px", border: "1px solid black" } }, 5)).toBe('<div style="margin-right:1px;border:1px solid black">5</div>');
+        //border-top-left-radius
+        (0, globals_1.expect)(div({ style: { marginRight: "1px", borderTopLeftRadius: "3px" } }, 5)).toBe('<div style="margin-right:1px;border-top-left-radius:3px">5</div>');
+        (0, globals_1.expect)(hr({ style: { color: "red", display: null } }, 5)).toBe('<hr style="color:red">');
+        (0, globals_1.expect)(hr({ style: { color: "red", display: "" } }, 5)).toBe('<hr style="color:red">');
+        (0, globals_1.expect)(hr({ style: { color: "red", display: "none" } }, 5)).toBe('<hr style="color:red;display:none">');
+        (0, globals_1.expect)(hr({ style: { color: "", display: null } }, 5)).toBe("<hr>");
+        (0, globals_1.expect)(hr({ style: { color: "red" } }, 5)).toBe('<hr style="color:red">');
+        (0, globals_1.expect)(hr({ style: {} })).toBe("<hr>");
+        (0, globals_1.expect)(hr({ style: null })).toBe("<hr>");
+        (0, globals_1.expect)(div({ class: "foo", style: null })).toBe('<div class="foo"></div>');
+    });
+    (0, globals_1.it)("escaping", () => {
+        (0, globals_1.expect)(text("foo")).toBe("foo");
+        (0, globals_1.expect)(text_attr('" onMouseOver="alert(1);')).toBe("&quot; onMouseOver=&quot;alert(1);");
+        (0, globals_1.expect)(text(1)).toBe("1");
+        (0, globals_1.expect)(text(0)).toBe("0");
+        (0, globals_1.expect)(text("<script>alert(1);<script>")).toBe("&lt;script&gt;alert(1);&lt;script&gt;");
+        (0, globals_1.expect)(text("<p>alert<p>")).toBe("<p>alert<p>");
+        (0, globals_1.expect)(text("<kbd>ctrl<kbd>")).toBe("<kbd>ctrl<kbd>");
+        (0, globals_1.expect)(text('<span style="color:#2ecc71;">green</span>')).toBe('<span style="color:#2ecc71;">green</span>');
+        (0, globals_1.expect)(text('<article style="color:#2ecc71;">green</article>')).toBe("<article>green</article>");
+        (0, globals_1.expect)(text('<article style="color:#2ecc71;">green</article>', {
+            article: ["style"],
+        })).toBe('<article style="color:#2ecc71;">green</article>');
+        (0, globals_1.expect)(text('<progress onclick="foo()">green</progress>', {
+            progress: ["onclick"],
+        })).toBe('<progress onclick="foo()">green</progress>');
+    });
+});
+(0, globals_1.describe)("mjml tags", () => {
+    (0, globals_1.it)("renders", () => {
+        (0, globals_1.expect)(mjml.mjml(mjml.body(mjml.section({ "background-color": "#f0f0f0" }, mjml.text("hello world"))))).toBe('<mjml><mj-body><mj-section background-color="#f0f0f0"><mj-text>hello world</mj-text></mj-section></mj-body></mjml>');
+    });
+    (0, globals_1.it)("renders emailButton with default style", () => {
+        const result = mjml.emailButton({
+            href: "https://example.com",
+            title: "Click Me",
+        }, "Click Me");
+        const expected = `
+  <a rel="noopener" target="_blank" title="Click Me" href="https://example.com" style="background-color: #6c757d; color: #ffffff; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
+    <!--[if mso]>
+    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
+    <![endif]-->
+    <span style="mso-text-raise: 15pt;">Click Me</span>
+    <!--[if mso]>
+    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
+    <![endif]-->
+  </a>
+`
+            .replace(/\s+/g, " ")
+            .trim();
+        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+    });
+    (0, globals_1.it)("renders emailButton with btn-primary style", () => {
+        const result = mjml.emailButton({
+            href: "https://example.com",
+            title: "Click Me",
+            btnStyle: "btn-primary",
+        }, "Click Me");
+        const expected = '<a rel="noopener" target="_blank" title="Click Me" href="https://example.com" style="background-color: #0d6efd; color: #ffffff; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
+            .replace(/\s+/g, " ")
+            .trim();
+        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+    });
+    (0, globals_1.it)("renders emailButton with btn-outline-primary style", () => {
+        const result = mjml.emailButton({ href: "https://example.com", btnStyle: "btn-outline-primary" }, "Click Me");
+        const expected = '<a rel="noopener" target="_blank" href="https://example.com" style="background-color: transparent; color: #0d6efd; border-color: #0d6efd;border-width:1px; border-style: solid; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
+            .replace(/\s+/g, " ")
+            .trim();
+        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+    });
+    (0, globals_1.it)("renders emailButton with custom title and style", () => {
+        const result = mjml.emailButton({
+            href: "https://example.com",
+            title: "Custom Title",
+            btnStyle: "btn-danger",
+            style: "color: #fff; background-color: #000",
+        }, "Click Me");
+        const expected = '<a rel="noopener" target="_blank" title="Custom Title" href="https://example.com" style="color: #fff; background-color: #000; border-width: 1px; border-style: solid; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;"> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i> <![endif]--> <span style="mso-text-raise: 15pt;">Click Me</span> <!--[if mso]> <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i> <![endif]--> </a>'
+            .replace(/\s+/g, " ")
+            .trim();
+        (0, globals_1.expect)(result.replace(/\s+/g, " ").trim()).toBe(expected);
+    });
+});
+(0, globals_1.describe)("tabs", () => {
+    (0, globals_1.it)("renders tabs with single content", () => {
+        const result = (0, tabs_1.default)({
+            Tab1: "Content1",
+        });
+        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div></div>`);
+    });
+    (0, globals_1.it)("renders tabs with multiple contents", () => {
+        const result = (0, tabs_1.default)({ Tab1: "Content1", Tab2: "Content2" });
+        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
+    });
+    (0, globals_1.it)("renders tabs from an array of entries", () => {
+        const result = (0, tabs_1.default)([
+            ["Tab1", "Content1"],
+            ["Tab2", "Content2"],
+        ]);
+        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"><li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#Tab1" id="Tab1-tab" role="tab" aria-controls="home" aria-selected="true">Tab1</a></li><li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#Tab2" id="Tab2-tab" role="tab" aria-controls="home" aria-selected="true">Tab2</a></li></ul><div class="tab-content"><div class="tab-pane fade show active" id="Tab1" role="tabpanel" aria-labelledby="Tab1-tab">Content1</div><div class="tab-pane fade" id="Tab2" role="tabpanel" aria-labelledby="Tab2-tab">Content2</div></div>`);
+    });
+    (0, globals_1.it)("handles empty tabs gracefully", () => {
+        const result = (0, tabs_1.default)({});
+        (0, globals_1.expect)(result).toBe(`<ul class="nav nav-tabs" role="tablist"></ul><div class="tab-content"></div>`);
+    });
+});
+(0, globals_1.describe)("table", () => {
+    (0, globals_1.it)("renders a basic table", () => {
+        const headers = [
+            { label: "Name", key: "name" },
+            { label: "Age", key: "age" },
+        ];
+        const rows = [
+            { name: "UserName1", age: 25, id: 1 },
+            { name: "UserName2", age: 30, id: 2 },
+        ];
+        const result = (0, table_1.default)(headers, rows);
+        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table></div>`);
+    });
+    (0, globals_1.it)("renders a tramnsposed table", () => {
+        const headers = [
+            {
+                label: "Name",
+                key: "name",
+            },
+            {
+                label: "Age",
+                key: "age",
+            },
+        ];
+        const rows = [
+            { name: "UserName1", age: 25 },
+            { name: "UserName2", age: 30 },
+        ];
+        const result = (0, table_1.default)(headers, rows, { transpose: true });
+        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
+    });
+    (0, globals_1.it)("renders a transposed table", () => {
+        const headers = [
+            {
+                label: "Name",
+                key: "name",
+            },
+            {
+                label: "Age",
+                key: "age",
+            },
+        ];
+        const rows = [
+            { name: "UserName1", age: 25 },
+            { name: "UserName2", age: 30 },
+        ];
+        const result = (0, table_1.default)(headers, rows, { transpose: true });
+        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><tbody><tr row-key="name"><th>Name</th><td>UserName1</td><td>UserName2</td></tr><tr row-key="age"><th>Age</th><td>25</td><td>30</td></tr></tbody></table></div>`);
+    });
+    (0, globals_1.it)("renders a table with pagination", () => {
+        const headers = [
+            { label: "Name", key: "name" },
+            { label: "Age", key: "age" },
+        ];
+        const rows = [
+            { name: "UserName1", age: 25, id: 1 },
+            { name: "UserName2", age: 30, id: 2 },
+        ];
+        const paginationOpts = {
+            current_page: 1,
+            pages: 3,
+            get_page_link: (page) => `?page=${page}`,
+        };
+        const result = (0, table_1.default)(headers, rows, { pagination: paginationOpts });
+        (0, globals_1.expect)(result).toBe(`<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Name</th><th>Age</th></tr></thead><tbody><tr data-row-id="1"><td>UserName1</td><td>25</td></tr><tr data-row-id="2"><td>UserName2</td><td>30</td></tr></tbody></table><ul class="pagination"><li class="page-item active"><span class="page-link link-style" onclick="?page=1" role="link">1</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=2" role="link">2</span></li><li class="page-item"><span class="page-link link-style" onclick="?page=3" role="link">3</span></li></ul></div>`);
+    });
+});
+(0, globals_1.describe)("mjml-layout", () => {
+    (0, globals_1.describe)("transformTextStyle", () => {
+        (0, globals_1.it)("transforms text styles correctly", () => {
+            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("h1")).toEqual({
+                "font-size": "2em",
+                "margin-top": "0.67em",
+                "margin-bottom": "0.67em",
+                "margin-left": 0,
+                "margin-right": 0,
+                "font-weight": "bold",
+            });
+            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("fw-bold")).toEqual({
+                "font-weight": "700 !important",
+            });
+            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("text-muted")).toEqual({
+                "--bs-text-opacity": "1",
+                color: "#858796 !important",
+            });
+        });
+        (0, globals_1.it)("returns an empty object for unknown styles", () => {
+            (0, globals_1.expect)((0, mjml_layout_1.transformTextStyle)("unknown-style")).toEqual({});
+        });
+    });
+    (0, globals_1.describe)("transformLinkSize", () => {
+        (0, globals_1.it)("transforms link sizes correctly", () => {
+            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("btn-lg")).toEqual({
+                padding: "0.5rem 1rem",
+                "font-size": "1.25rem",
+            });
+            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("btn-sm")).toEqual({
+                padding: "0.25rem 0.5rem",
+                "font-size": "0.875rem",
+            });
+        });
+        (0, globals_1.it)("returns an empty object for unknown sizes", () => {
+            (0, globals_1.expect)((0, mjml_layout_1.transformLinkSize)("unkown-size")).toEqual({});
+        });
+    });
+    (0, globals_1.describe)("applyTextStyle", () => {
+        (0, globals_1.it)("applies text style to block elements", () => {
+            const segment = {
+                textStyle: "h1",
+                inline: false,
+                style: {
+                    color: "red",
+                },
+            };
+            const inner = "Hello World";
+            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
+            (0, globals_1.expect)(result).toContain('<div style="');
+            (0, globals_1.expect)(result).toContain("font-size:2em");
+            (0, globals_1.expect)(result).toContain("color:red");
+        });
+        (0, globals_1.it)("applies text styles to inline elements", () => {
+            const segment = {
+                textStyle: "fw-bold",
+                inline: true,
+                style: { color: "blue" },
+            };
+            const inner = "Hello World";
+            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
+            (0, globals_1.expect)(result).toContain('<span style="');
+            (0, globals_1.expect)(result).toContain("font-weight:700 !important");
+            (0, globals_1.expect)(result).toContain("color:blue");
+            (0, globals_1.expect)(result).toContain("Hello World");
+        });
+        (0, globals_1.it)("returns inner content without wrapping if no styles are applied", () => {
+            const segment = { textStyle: null, style: {} };
+            const inner = "Hello World";
+            const result = (0, mjml_layout_1.applyTextStyle)(segment, inner);
+            (0, globals_1.expect)(result).toBe("Hello World");
+        });
+    });
+    (0, globals_1.describe)("renderMJML", () => {
+        (0, globals_1.it)("renders a layout with an image", () => {
+            const layout = {
+                type: "container",
+                contents: [
+                    {
+                        type: "image",
+                        alt: "Test Image",
+                        fileid: 1,
+                        srcType: "File",
+                        style: {
+                            width: "100%",
+                        },
+                    },
+                ],
+            };
+            const req = {
+                isSubView: false,
+                get_base_url: () => "https://example.com",
+            };
+            const result = (0, mjml_layout_1.renderMJML)({
+                layout,
+                req,
+            });
+            (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><img style="width:100%" alt="Test Image" src="https://example.com/files/serve/1"></div></mj-raw></mj-section>`);
+        });
+        (0, globals_1.it)("renders a layout with a link", () => {
+            const layout = {
+                type: "container",
+                contents: [
+                    {
+                        type: "link",
+                        url: "https://example.com",
+                        text: "Click Here",
+                        link_style: "btn btn-primary",
+                    },
+                ],
+            };
+            const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+            const expected = `<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><a rel="noopener" target="_blank" href="https://example.com" style="background-color: #0d6efd; color: #ffffff; font-size: 18px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 20px; border-radius: 5px; display: inline-block; mso-padding-alt: 0;">
+        <!--[if mso]>
+        <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
+        <![endif]-->
+        <span style="mso-text-raise: 15pt;">Click Here</span>
+        <!--[if mso]>
+        <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
+        <![endif]-->
+    </a></div></mj-raw></mj-section>`
+                .replace(/\s+/g, " ")
+                .trim();
+            (0, globals_1.expect)(result.markup.replace(/\s+/g, " ").trim()).toBe(expected);
+        });
+        (0, globals_1.it)("renders a layout with nested containers", () => {
+            const layout = {
+                type: "container",
+                contents: [
+                    {
+                        type: "container",
+                        contents: [
+                            {
+                                type: "blank",
+                                contents: "Nested Text",
+                                bgColor: "#f0f0f0",
+                            },
+                        ],
+                    },
+                ],
+            };
+            const result = (0, mjml_layout_1.renderMJML)({
+                layout,
+                req: { isSubView: false },
+            });
+            const expected = `<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><div style=" border: 0px none black;">Nested Text</div></div></mj-raw></mj-section>`
+                .replace(/\s+/g, " ")
+                .trim();
+            const recieved = result.markup.replace(/\s+/g, " ").trim();
+            (0, globals_1.expect)(recieved).toBe(expected);
+        });
+        (0, globals_1.it)("renders a layout with a card", () => {
+            const layout = {
+                type: "container",
+                contents: [
+                    {
+                        type: "card",
+                        title: "Card Title",
+                        contents: { type: "blank", contents: "Card Content" },
+                    },
+                ],
+            };
+            const result = (0, mjml_layout_1.renderMJML)({
+                layout,
+                req: { isSubView: false },
+            });
+            const expected = `<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><div class="card mt-4 shadow"><div class="card-header"><h6 class="m-0 fw-bold text-primary">Card Title</h6></div><div class="card-body">Card Content</div></div></div></mj-raw></mj-section>`
+                .replace(/\s+/g, " ")
+                .trim();
+            const recieved = result.markup.replace(/\s+/g, " ").trim();
+            (0, globals_1.expect)(recieved).toBe(expected);
+        });
+        (0, globals_1.it)("renders a layout with tabs", () => {
+            const layout = {
+                type: "tabs",
+                contents: [
+                    {
+                        type: "tabs",
+                        tabs: {
+                            Tab1: "Content1",
+                            Tab2: "Content2",
+                        },
+                    },
+                ],
+            };
+            const result = (0, mjml_layout_1.renderMJML)({
+                layout,
+                req: { isSubView: false },
+            });
+            const expected = `<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`
+                .replace(/\s+/g, " ")
+                .trim();
+            const recieved = result.markup.replace(/\s+/g, " ").trim();
+            (0, globals_1.expect)(recieved).toBe(expected);
+        });
+    });
+    (0, globals_1.it)("renders a layout with a page header", () => {
+        const layout = {
+            type: "container",
+            contents: [
+                {
+                    type: "pageHeader",
+                    title: "Welcome",
+                    blurb: "This is a test page header",
+                },
+            ],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><h1>Welcome</h1><p>This is a test page header</p></div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders layout with a table", () => {
+        const layout = {
+            type: "container",
+            contents: [
+                {
+                    type: "table",
+                    rows: 2,
+                    columns: 2,
+                    contents: [
+                        [
+                            { type: "blank", contents: "Cell 1" },
+                            { type: "blank", contents: "Cell 2" },
+                        ],
+                        [
+                            { type: "blank", contents: "Cell 3" },
+                            { type: "blank", contents: "Cell 4" },
+                        ],
+                    ],
+                },
+            ],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({
+            layout,
+            req: { isSubView: false },
+        });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"><table><tbody><tr><td>Cell 1</td><td>Cell 2</td></tr><tr><td>Cell 3</td><td>Cell 4</td></tr></tbody></table></div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders a layout with a dropdown menu", () => {
+        const layout = {
+            type: "container",
+            contents: [
+                {
+                    type: "dropdown_menu",
+                    items: [
+                        {
+                            type: "Option 1",
+                            url: "/option1",
+                        },
+                        {
+                            type: "Option 2",
+                            url: "/option2",
+                        },
+                    ],
+                },
+            ],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;"></div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders a layout with conditional visibility based on role", () => {
+        const layout = {
+            type: "container",
+            contents: [
+                {
+                    type: "blank",
+                    contents: "Visible to all",
+                },
+                {
+                    type: "blank",
+                    contents: "Visible to admins only",
+                    minRole: 1,
+                },
+            ],
+        };
+        const resultForAdmin = (0, mjml_layout_1.renderMJML)({
+            layout,
+            req: { isSubView: false },
+            role: 1,
+        });
+        const resultForUser = (0, mjml_layout_1.renderMJML)({
+            layout,
+            req: { isSubView: false },
+            role: 2,
+        });
+        (0, globals_1.expect)(resultForAdmin.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to allVisible to admins only</div></mj-raw></mj-section>`);
+        (0, globals_1.expect)(resultForUser.markup).toContain(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Visible to all</div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders a layout with a gradient background", () => {
+        const layout = {
+            type: "container",
+            bgType: "Gradient",
+            gradStartColor: "#ff0000",
+            gradEndColor: "#0000ff",
+            gradDirection: 45,
+            contents: [{ type: "blank", contents: "Gradient Background" }],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Gradient Background</div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders a layout with a rotated container", () => {
+        const layout = {
+            type: "container",
+            rotate: 45,
+            contents: [{ type: "blank", contents: "Rotated Content" }],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Rotated Content</div></mj-raw></mj-section>`);
+    });
+    (0, globals_1.it)("renders a layout with a custom class and CSS", () => {
+        const layout = {
+            type: "container",
+            customClass: "custom-container",
+            customCSS: "border: 1px solid red;",
+            contents: [{ type: "blank", contents: "Custom Styled Content" }],
+        };
+        const result = (0, mjml_layout_1.renderMJML)({ layout, req: { isSubView: false } });
+        (0, globals_1.expect)(result.markup).toBe(`<mj-section><mj-raw><div style="text-align: left !important; font-size: 16px;">Custom Styled Content</div></mj-raw></mj-section>`);
+    });
+});
+(0, globals_1.describe)("index", () => {
+    (0, globals_1.describe)("post-bn", () => {
+        (0, globals_1.it)("renders a basic post button", () => {
+            const result = post_btn("/submit", "Submit", "csrfToken123", {
+                btnClass: "btn-primary",
+            });
+            (0, globals_1.expect)(result).toContain('<form action="/submit" method="post">');
+            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+            (0, globals_1.expect)(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
+            (0, globals_1.expect)(result).toContain("</form>");
+        });
+        (0, globals_1.it)("renders a basic post button", () => {
+            const result = post_btn("/submit", "Submit", "csrfToken123", {
+                btnClass: "btn-primary",
+            });
+            (0, globals_1.expect)(result).toContain('<form action="/submit" method="post">');
+            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+            (0, globals_1.expect)(result).toContain('<button type="submit" class=" btn  btn-primary d-inline-block">Submit</button>');
+            (0, globals_1.expect)(result).toContain("</form>");
+        });
+    });
+    (0, globals_1.describe)("post_delete_btn", () => {
+        (0, globals_1.it)("renders a delete button with confirmation", () => {
+            const req = {
+                csrfToken: () => "csrfToken123",
+                __: (str) => str,
+                "Are you sure?": "Are you sure?",
+            };
+            const result = post_delete_btn("/delete", req);
+            const normalized = result.replace(/\s+/g, " ").trim();
+            (0, globals_1.expect)(normalized).toBe(`<form action=\"/delete\" method=\"post\"><input type=\"hidden\" name=\"_csrf\" value=\"csrfToken123\"><button type=\"submit\" class=\"btn btn-danger btn-sm\" onclick=\"return confirm('Are you sure?')\"><i class=\"fas fa-trash-alt\"></i></button></form>`
+                .replace(/\s+/g, " ")
+                .trim());
+        });
+    });
+    (0, globals_1.describe)("post_dropdown_item", () => {
+        (0, globals_1.it)("renders a dropdown item with confirmation", () => {
+            const req = {
+                csrfToken: () => "csrfToken123",
+                __: (str) => str,
+                "Are you sure?": "Are you sure?",
+            };
+            const result = post_dropdown_item("/delete", "Delete", req, true);
+            (0, globals_1.expect)(result).toContain('<a class="dropdown-item"');
+            (0, globals_1.expect)(result).toContain("onclick=\"if(confirm('Are you sure?'))");
+            (0, globals_1.expect)(result).toContain("$('#delete').submit()\">Delete</a>");
+            (0, globals_1.expect)(result).toContain('<form id="delete" action="/delete" method="post">');
+            (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123">');
+        });
+    });
+    (0, globals_1.describe)("settingsDropdown", () => {
+        (0, globals_1.it)("renders a settings dropdown", () => {
+            const result = settingsDropdown("dropdown1", "<a>Option 1</a>");
+            (0, globals_1.expect)(result).toContain('<div class="dropdown">');
+            (0, globals_1.expect)(result).toContain('<button class="btn btn-sm btn-outline-secondary"');
+            (0, globals_1.expect)(result).toContain('<div class="dropdown-menu dropdown-menu-end"');
+            (0, globals_1.expect)(result).toContain("<a>Option 1</a>");
+        });
+    });
+    (0, globals_1.describe)("localeDate", () => {
+        (0, globals_1.it)("renders a localized date", () => {
+            const date = new Date("2023-01-01T00:00:00Z");
+            const result = localeDate(date, {}, "en");
+            (0, globals_1.expect)(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
+            (0, globals_1.expect)(result).toContain(">1/1/2023</time>");
+        });
+        (0, globals_1.it)("renders a localized date with custom options", () => {
+            const date = new Date("2023-01-01T00:00:00Z");
+            const result = localeDate(date, { year: "numeric", month: "long", day: "numeric" }, "en");
+            (0, globals_1.expect)(result).toContain('<time datetime="2023-01-01T00:00:00.000Z"');
+            (0, globals_1.expect)(result).toContain(">January 1, 2023</time>");
+        });
+    });
+});
+(0, globals_1.describe)("builder", () => {
+    (0, globals_1.it)("renders the builder with default options", () => {
+        const options = { someOption: "value" };
+        const context = { someContent: "value" };
+        const action = "/submit";
+        const stepName = "step1";
+        const layout = { type: "container", contents: [] };
+        const csrfToken = "csrfToken123";
+        const result = (0, builder_1.default)({ options, context, action, stepName, layout }, csrfToken);
+        (0, globals_1.expect)(result).toContain('<div id="saltcorn-builder"></div>');
+        (0, globals_1.expect)(result).toContain('<form action="/submit" method="post" id="scbuildform">');
+        (0, globals_1.expect)(result).toContain('<input type="hidden" name="contextEnc"');
+        (0, globals_1.expect)(result).toContain('<input type="hidden" name="stepName" value="step1">');
+        (0, globals_1.expect)(result).toContain('<input type="hidden" name="_csrf" value="csrfToken123"');
+        (0, globals_1.expect)(result).toContain("builder.renderBuilder(");
+    });
+    (0, globals_1.it)("renders the builder with a version tag", () => {
+        const options = { someOptions: "value" };
+        const context = { someContext: "value" };
+        const action = "/submit";
+        const stepName = "step1";
+        const layout = { type: "container", contents: [] };
+        const csrfToken = "csrfToken123";
+        const version_tag = "v1.0.0";
+        const result = (0, builder_1.default)({ options, context, action, stepName, layout, version_tag }, csrfToken);
+        (0, globals_1.expect)(result).toContain('<script src="/static_assets/v1.0.0/builder_bundle.js"></script>');
+        (0, globals_1.expect)(result).toContain('<link rel="stylesheet" type="text/css" media="screen" href="/static_assets/v1.0.0/saltcorn-builder.css">');
+    });
+    (0, globals_1.it)("renders the builder with custom mode", () => {
+        const options = { someOption: "value" };
+        const context = { someOptions: "value" };
+        const action = "/submit";
+        const stepName = "step1";
+        const layout = { type: "container", contents: [] };
+        const csrfToken = "csrfToken123";
+        const mode = "edit";
+        const result = (0, builder_1.default)({ options, context, action, stepName, layout, mode }, csrfToken);
+        (0, globals_1.expect)(result).toContain("builder.renderBuilder(");
+        (0, globals_1.expect)(result).toContain('"edit"');
+    });
+});
+//# sourceMappingURL=markup.test.js.map