@emabuild/core 0.1.5 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/canvas/content-renderer.d.ts +5 -2
- package/dist/canvas/content-renderer.d.ts.map +1 -1
- package/dist/{form-tool-CduLiZgt.js → form-tool-DdFDrS3b.js} +10 -10
- package/dist/form-tool-DdFDrS3b.js.map +1 -0
- package/dist/{html-tool-D4ay2h-U.js → html-tool-DMtmrF3n.js} +3 -3
- package/dist/{html-tool-D4ay2h-U.js.map → html-tool-DMtmrF3n.js.map} +1 -1
- package/dist/{index-BoKIXJKv.js → index-CpMbWdgn.js} +318 -227
- package/dist/index-CpMbWdgn.js.map +1 -0
- package/dist/index.js +1 -1
- package/dist/mail-editor.d.ts.map +1 -1
- package/dist/{menu-tool-KvGDbaYD.js → menu-tool-CJcQdpcP.js} +10 -10
- package/dist/menu-tool-CJcQdpcP.js.map +1 -0
- package/dist/properties/property-panel.d.ts.map +1 -1
- package/dist/properties/widgets/index.d.ts +1 -0
- package/dist/properties/widgets/index.d.ts.map +1 -1
- package/dist/properties/widgets/number-unit-widget.d.ts +10 -0
- package/dist/properties/widgets/number-unit-widget.d.ts.map +1 -0
- package/dist/{social-tool-B8Jg2yE-.js → social-tool-CRY3-_sU.js} +8 -8
- package/dist/social-tool-CRY3-_sU.js.map +1 -0
- package/dist/{table-tool-BzpD08dq.js → table-tool-DeIQci5z.js} +8 -8
- package/dist/table-tool-DeIQci5z.js.map +1 -0
- package/dist/{timer-tool-Ck1ERDW-.js → timer-tool-BVE1shO1.js} +6 -6
- package/dist/timer-tool-BVE1shO1.js.map +1 -0
- package/dist/tools/built-in/button-tool.d.ts.map +1 -1
- package/dist/tools/built-in/heading-tool.d.ts.map +1 -1
- package/dist/tools/built-in/image-tool.d.ts.map +1 -1
- package/dist/tools/helpers/index.d.ts +1 -1
- package/dist/tools/helpers/index.d.ts.map +1 -1
- package/dist/tools/helpers/value-extractor.d.ts +9 -0
- package/dist/tools/helpers/value-extractor.d.ts.map +1 -1
- package/dist/{video-tool-CdGVmZxz.js → video-tool-g1fIoCWW.js} +3 -3
- package/dist/video-tool-g1fIoCWW.js.map +1 -0
- package/package.json +3 -3
- package/dist/form-tool-CduLiZgt.js.map +0 -1
- package/dist/index-BoKIXJKv.js.map +0 -1
- package/dist/menu-tool-KvGDbaYD.js.map +0 -1
- package/dist/social-tool-B8Jg2yE-.js.map +0 -1
- package/dist/table-tool-BzpD08dq.js.map +0 -1
- package/dist/timer-tool-Ck1ERDW-.js.map +0 -1
- package/dist/video-tool-CdGVmZxz.js.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mail-editor.d.ts","sourceRoot":"","sources":["../src/mail-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EACV,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,aAAa,EAEb,wBAAwB,EACxB,mBAAmB,EAIpB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAMhF,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AAExC,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,0BAcX;IAE0B,OAAO,EAAE,gBAAgB,CAAM;IAE3D,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,WAAW,CAA6B;IAEhD,iBAAiB;IAQjB,YAAY;IAoBZ,OAAO,CAAC,cAAc,
|
|
1
|
+
{"version":3,"file":"mail-editor.d.ts","sourceRoot":"","sources":["../src/mail-editor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EACV,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,aAAa,EAEb,wBAAwB,EACxB,mBAAmB,EAIpB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAgB,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAMhF,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AACrC,OAAO,gCAAgC,CAAC;AAExC,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,MAAM,CAAC,MAAM,0BAcX;IAE0B,OAAO,EAAE,gBAAgB,CAAM;IAE3D,OAAO,CAAC,KAAK,CAAqB;IAClC,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,WAAW,CAA4B;IAC/C,OAAO,CAAC,SAAS,CAA+B;IAChD,OAAO,CAAC,WAAW,CAA6B;IAEhD,iBAAiB;IAQjB,YAAY;IAoBZ,OAAO,CAAC,cAAc,CA6BpB;IAEF,oBAAoB;IAYpB,UAAU,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAIrC,UAAU,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,GAAG,IAAI;IAIzD,UAAU,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,IAAI;IAuBnF,OAAO,CAAC,QAAQ;IAQV,eAAe,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,YAAY,CAAC;IAIrE,YAAY,CAAC,UAAU,EAAE,iBAAiB,GAAG,IAAI;IAKjD,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,wBAAwB,GAAG,IAAI;IAI9E,WAAW,CAAC,IAAI,EAAE,mBAAmB,GAAG,IAAI;IAI5C,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,IAAI;IAIxD,YAAY,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,IAAI;IAIpC,IAAI,IAAI,IAAI;IAIZ,IAAI,IAAI,IAAI;IAIZ,aAAa,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQpD;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,oBAAoB;IAW5B,OAAO,CAAC,YAAY;IAMpB,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,iBAAiB,CAAC;KAClC;CACF"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { html as
|
|
2
|
-
import { s as e, j as
|
|
1
|
+
import { html as p } from "lit";
|
|
2
|
+
import { s as e, j as g, e as m } from "./index-CpMbWdgn.js";
|
|
3
3
|
const i = [
|
|
4
4
|
{ text: "Home", href: "#" },
|
|
5
5
|
{ text: "About", href: "#" },
|
|
@@ -41,21 +41,21 @@ const i = [
|
|
|
41
41
|
},
|
|
42
42
|
renderer: {
|
|
43
43
|
renderEditor(t) {
|
|
44
|
-
const
|
|
45
|
-
return
|
|
46
|
-
<div style="
|
|
47
|
-
${
|
|
48
|
-
<a href=${n.href} style="color:${
|
|
44
|
+
const d = e(t, "containerPadding", "10px"), o = e(t, "textAlign", "center"), a = e(t, "fontSize", "14px"), l = e(t, "color", "#333333"), c = e(t, "separator", "|"), s = e(t, "separatorColor", "#cccccc"), x = g(t.items, i);
|
|
45
|
+
return p`
|
|
46
|
+
<div style="text-align:${o};font-size:${a};font-family:arial,sans-serif;">
|
|
47
|
+
${x.map((n, r) => p`${r > 0 ? p`<span style="color:${s};padding:0 8px;">${c}</span>` : ""}
|
|
48
|
+
<a href=${n.href} style="color:${l};text-decoration:none;">${n.text}</a>`)}
|
|
49
49
|
</div>
|
|
50
50
|
`;
|
|
51
51
|
},
|
|
52
52
|
renderHtml(t) {
|
|
53
|
-
const
|
|
54
|
-
return m(`<div style="text-align:${o};">${n}</div>`, { padding:
|
|
53
|
+
const d = e(t, "containerPadding", "10px"), o = e(t, "textAlign", "center"), a = e(t, "fontSize", "14px"), l = e(t, "color", "#333333"), c = e(t, "separator", "|"), s = e(t, "separatorColor", "#cccccc"), n = g(t.items, i).map((r, f) => `${f > 0 ? `<span style="color:${s};padding:0 8px;">${c}</span>` : ""}<a href="${r.href}" target="_blank" style="color:${l};text-decoration:none;font-family:arial,helvetica,sans-serif;font-size:${a};">${r.text}</a>`).join("");
|
|
54
|
+
return m(`<div style="text-align:${o};">${n}</div>`, { padding: d, align: o });
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
};
|
|
58
58
|
export {
|
|
59
59
|
h as menuTool
|
|
60
60
|
};
|
|
61
|
-
//# sourceMappingURL=menu-tool-
|
|
61
|
+
//# sourceMappingURL=menu-tool-CJcQdpcP.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"menu-tool-CJcQdpcP.js","sources":["../src/tools/built-in/menu-tool.ts"],"sourcesContent":["/**\n * @module menu-tool\n *\n * Horizontal navigation menu with separator characters.\n *\n * Email compatibility: Uses inline `<a>` tags with text separators.\n * All styles are inline for cross-client rendering.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str, jsonParse } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\nimport type { MenuItem } from '../helpers/types.js';\n\nconst DEFAULT_ITEMS: MenuItem[] = [\n { text: 'Home', href: '#' },\n { text: 'About', href: '#' },\n { text: 'Contact', href: '#' },\n];\n\nexport const menuTool: LitToolDefinition = {\n name: 'menu',\n label: 'Menu',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><line x1=\"4\" y1=\"6\" x2=\"20\" y2=\"6\"/><line x1=\"4\" y1=\"12\" x2=\"20\" y2=\"12\"/><line x1=\"4\" y1=\"18\" x2=\"20\" y2=\"18\"/></svg>`,\n supportedDisplayModes: ['email', 'web'],\n position: 9,\n options: {\n menu: {\n title: 'Menu',\n options: { items: { label: 'Items (JSON)', defaultValue: JSON.stringify(DEFAULT_ITEMS), widget: 'rich_text' } },\n },\n style: {\n title: 'Style',\n options: {\n textAlign: { label: 'Align', defaultValue: 'center', widget: 'alignment' },\n fontSize: { label: 'Font Size', defaultValue: '14px', widget: 'text' },\n color: { label: 'Text Color', defaultValue: '#333333', widget: 'color_picker' },\n separator: { label: 'Separator', defaultValue: '|', widget: 'text' },\n separatorColor: { label: 'Separator Color', defaultValue: '#cccccc', widget: 'color_picker' },\n },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n items: JSON.stringify(DEFAULT_ITEMS), textAlign: 'center', fontSize: '14px',\n color: '#333333', separator: '|', separatorColor: '#cccccc', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const align = str(values, 'textAlign', 'center');\n const fontSize = str(values, 'fontSize', '14px');\n const color = str(values, 'color', '#333333');\n const sep = str(values, 'separator', '|');\n const sepColor = str(values, 'separatorColor', '#cccccc');\n const items = jsonParse<MenuItem[]>(values.items, DEFAULT_ITEMS);\n\n return html`\n <div style=\"text-align:${align};font-size:${fontSize};font-family:arial,sans-serif;\">\n ${items.map((item, i) => html`${i > 0 ? html`<span style=\"color:${sepColor};padding:0 8px;\">${sep}</span>` : ''}\n <a href=${item.href} style=\"color:${color};text-decoration:none;\">${item.text}</a>`)}\n </div>\n `;\n },\n renderHtml(values: ContentValues): string {\n const padding = str(values, 'containerPadding', '10px');\n const align = str(values, 'textAlign', 'center');\n const fontSize = str(values, 'fontSize', '14px');\n const color = str(values, 'color', '#333333');\n const sep = str(values, 'separator', '|');\n const sepColor = str(values, 'separatorColor', '#cccccc');\n const items = jsonParse<MenuItem[]>(values.items, DEFAULT_ITEMS);\n\n const links = items.map((item, i) => {\n const prefix = i > 0 ? `<span style=\"color:${sepColor};padding:0 8px;\">${sep}</span>` : '';\n return `${prefix}<a href=\"${item.href}\" target=\"_blank\" style=\"color:${color};text-decoration:none;font-family:arial,helvetica,sans-serif;font-size:${fontSize};\">${item.text}</a>`;\n }).join('');\n\n return emailTableCell(`<div style=\"text-align:${align};\">${links}</div>`, { padding, align });\n },\n },\n};\n"],"names":["DEFAULT_ITEMS","menuTool","values","padding","str","align","fontSize","color","sep","sepColor","items","jsonParse","html","item","i","links","emailTableCell"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"property-panel.d.ts","sourceRoot":"","sources":["../../src/properties/property-panel.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"property-panel.d.ts","sourceRoot":"","sources":["../../src/properties/property-panel.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAQ9D,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,0BAiCX;IAEF,OAAO,CAAC,SAAS,CAAsD;IAEvE,IACI,KAAK,CAAC,CAAC,EAAE,WAAW,EAAiC;IACzD,IAAI,KAAK,IAAI,WAAW,CAAkC;IAE1B,YAAY,EAAG,YAAY,CAAC;IAE5D,8EAA8E;IAC9E,OAAO,CAAC,QAAQ;IAMhB,MAAM;IAyBN,OAAO,CAAC,WAAW;IAanB,kFAAkF;IAClF,OAAO,CAAC,YAAY;CAgBrB"}
|
|
@@ -5,4 +5,5 @@ export { renderPadding } from './padding-widget.js';
|
|
|
5
5
|
export { renderToggle } from './toggle-widget.js';
|
|
6
6
|
export { renderTextInput } from './text-input-widget.js';
|
|
7
7
|
export { renderTextArea } from './textarea-widget.js';
|
|
8
|
+
export { renderNumberUnit } from './number-unit-widget.js';
|
|
8
9
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/properties/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/properties/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { TemplateResult } from 'lit';
|
|
2
|
+
/**
|
|
3
|
+
* Render a numeric input with unit suffix.
|
|
4
|
+
* @param value - Current value as string with unit (e.g. "10px")
|
|
5
|
+
* @param onChange - Called on every input change with the full value string
|
|
6
|
+
* @param label - Field label
|
|
7
|
+
* @param params - Optional: { unit, min, max, step }
|
|
8
|
+
*/
|
|
9
|
+
export declare function renderNumberUnit(value: string, onChange: (v: string) => void, label: string, params?: Record<string, unknown>): TemplateResult;
|
|
10
|
+
//# sourceMappingURL=number-unit-widget.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"number-unit-widget.d.ts","sourceRoot":"","sources":["../../../src/properties/widgets/number-unit-widget.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3C;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,EAC7B,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAC/B,cAAc,CA+BhB"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html as s } from "lit";
|
|
2
|
-
import { s as t, j as g, e as x } from "./index-
|
|
2
|
+
import { s as t, j as g, e as x } from "./index-CpMbWdgn.js";
|
|
3
3
|
const l = [
|
|
4
4
|
{ name: "Facebook", url: "https://facebook.com/", icon: "f", color: "#1877F2" },
|
|
5
5
|
{ name: "Twitter", url: "https://twitter.com/", icon: "𝕏", color: "#000000" },
|
|
@@ -38,25 +38,25 @@ const l = [
|
|
|
38
38
|
},
|
|
39
39
|
renderer: {
|
|
40
40
|
renderEditor(n) {
|
|
41
|
-
const
|
|
41
|
+
const r = t(n, "containerPadding", "10px"), o = t(n, "textAlign", "center"), i = t(n, "iconSize", "32px"), c = t(n, "iconSpacing", "8px"), d = g(n.icons, l);
|
|
42
42
|
return s`
|
|
43
|
-
<div style="
|
|
43
|
+
<div style="text-align:${o};">
|
|
44
44
|
${d.map((e) => s`
|
|
45
|
-
<a href=${e.url} target="_blank" style="display:inline-block;width:${i};height:${i};line-height:${i};text-align:center;background:${e.color};color:white;border-radius:50%;text-decoration:none;font-size:14px;font-weight:bold;margin:0 ${
|
|
45
|
+
<a href=${e.url} target="_blank" style="display:inline-block;width:${i};height:${i};line-height:${i};text-align:center;background:${e.color};color:white;border-radius:50%;text-decoration:none;font-size:14px;font-weight:bold;margin:0 ${c};font-family:arial,sans-serif;vertical-align:middle;">${e.icon}</a>
|
|
46
46
|
`)}
|
|
47
47
|
</div>
|
|
48
48
|
`;
|
|
49
49
|
},
|
|
50
50
|
renderHtml(n) {
|
|
51
|
-
const
|
|
52
|
-
(
|
|
51
|
+
const r = t(n, "containerPadding", "10px"), o = t(n, "textAlign", "center"), i = t(n, "iconSize", "32"), c = t(n, "iconSpacing", "8px"), e = g(n.icons, l).map(
|
|
52
|
+
(a) => `<td align="center" valign="middle" style="padding:0 ${c};"><a href="${a.url}" target="_blank" style="text-decoration:none;"><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td width="${i}" height="${i}" align="center" valign="middle" style="width:${i}px;height:${i}px;background:${a.color};border-radius:50%;color:#fff;font-size:14px;font-weight:bold;font-family:arial,sans-serif;">${a.icon}</td></tr></table></a></td>`
|
|
53
53
|
).join(`
|
|
54
54
|
`), p = `<table role="presentation" cellpadding="0" cellspacing="0" border="0" align="${o}"><tr>${e}</tr></table>`;
|
|
55
|
-
return x(p, { padding:
|
|
55
|
+
return x(p, { padding: r, align: o });
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
59
|
export {
|
|
60
60
|
h as socialTool
|
|
61
61
|
};
|
|
62
|
-
//# sourceMappingURL=social-tool-
|
|
62
|
+
//# sourceMappingURL=social-tool-CRY3-_sU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"social-tool-CRY3-_sU.js","sources":["../src/tools/built-in/social-tool.ts"],"sourcesContent":["/**\n * @module social-tool\n *\n * Social media icon links (Facebook, Twitter, Instagram, LinkedIn, etc.).\n *\n * Email compatibility: Uses nested tables for icon layout.\n * Each icon is a colored circle with centered text, rendered\n * as a table cell for cross-client consistency.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str, jsonParse } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\nimport type { SocialIcon } from '../helpers/types.js';\n\nconst DEFAULT_ICONS: SocialIcon[] = [\n { name: 'Facebook', url: 'https://facebook.com/', icon: 'f', color: '#1877F2' },\n { name: 'Twitter', url: 'https://twitter.com/', icon: '𝕏', color: '#000000' },\n { name: 'Instagram', url: 'https://instagram.com/', icon: '📷', color: '#E4405F' },\n { name: 'LinkedIn', url: 'https://linkedin.com/', icon: 'in', color: '#0A66C2' },\n];\n\nexport const socialTool: LitToolDefinition = {\n name: 'social',\n label: 'Social',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"/><circle cx=\"6\" cy=\"12\" r=\"3\"/><circle cx=\"18\" cy=\"19\" r=\"3\"/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"/><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"/></svg>`,\n supportedDisplayModes: ['email', 'web'],\n position: 8,\n options: {\n icons: {\n title: 'Social Icons',\n options: {\n icons: { label: 'Icons (JSON)', defaultValue: JSON.stringify(DEFAULT_ICONS), widget: 'rich_text' },\n iconSize: { label: 'Icon Size', defaultValue: '32px', widget: 'text' },\n iconSpacing: { label: 'Spacing', defaultValue: '8px', widget: 'text' },\n },\n },\n style: {\n title: 'Style',\n options: { textAlign: { label: 'Align', defaultValue: 'center', widget: 'alignment' } },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n icons: JSON.stringify(DEFAULT_ICONS), iconSize: '32px', iconSpacing: '8px',\n textAlign: 'center', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const align = str(values, 'textAlign', 'center');\n const iconSize = str(values, 'iconSize', '32px');\n const spacing = str(values, 'iconSpacing', '8px');\n const icons = jsonParse<SocialIcon[]>(values.icons, DEFAULT_ICONS);\n\n return html`\n <div style=\"text-align:${align};\">\n ${icons.map((s) => html`\n <a href=${s.url} target=\"_blank\" style=\"display:inline-block;width:${iconSize};height:${iconSize};line-height:${iconSize};text-align:center;background:${s.color};color:white;border-radius:50%;text-decoration:none;font-size:14px;font-weight:bold;margin:0 ${spacing};font-family:arial,sans-serif;vertical-align:middle;\">${s.icon}</a>\n `)}\n </div>\n `;\n },\n renderHtml(values: ContentValues): string {\n const padding = str(values, 'containerPadding', '10px');\n const align = str(values, 'textAlign', 'center');\n const iconSize = str(values, 'iconSize', '32');\n const spacing = str(values, 'iconSpacing', '8px');\n const icons = jsonParse<SocialIcon[]>(values.icons, DEFAULT_ICONS);\n\n const cells = icons.map((s) =>\n `<td align=\"center\" valign=\"middle\" style=\"padding:0 ${spacing};\"><a href=\"${s.url}\" target=\"_blank\" style=\"text-decoration:none;\"><table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td width=\"${iconSize}\" height=\"${iconSize}\" align=\"center\" valign=\"middle\" style=\"width:${iconSize}px;height:${iconSize}px;background:${s.color};border-radius:50%;color:#fff;font-size:14px;font-weight:bold;font-family:arial,sans-serif;\">${s.icon}</td></tr></table></a></td>`\n ).join('\\n');\n\n const inner = `<table role=\"presentation\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" align=\"${align}\"><tr>${cells}</tr></table>`;\n return emailTableCell(inner, { padding, align });\n },\n },\n};\n"],"names":["DEFAULT_ICONS","socialTool","values","padding","str","align","iconSize","spacing","icons","jsonParse","html","s","cells","inner","emailTableCell"],"mappings":";;AAiBA,MAAMA,IAA8B;AAAA,EAClC,EAAE,MAAM,YAAY,KAAK,yBAAyB,MAAM,KAAK,OAAO,UAAA;AAAA,EACpE,EAAE,MAAM,WAAW,KAAK,wBAAwB,MAAM,MAAM,OAAO,UAAA;AAAA,EACnE,EAAE,MAAM,aAAa,KAAK,0BAA0B,MAAM,MAAM,OAAO,UAAA;AAAA,EACvE,EAAE,MAAM,YAAY,KAAK,yBAAyB,MAAM,MAAM,OAAO,UAAA;AACvE,GAEaC,IAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,SAAS,KAAK;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,OAAO,EAAE,OAAO,gBAAgB,cAAc,KAAK,UAAUD,CAAa,GAAG,QAAQ,YAAA;AAAA,QACrF,UAAU,EAAE,OAAO,aAAa,cAAc,QAAQ,QAAQ,OAAA;AAAA,QAC9D,aAAa,EAAE,OAAO,WAAW,cAAc,OAAO,QAAQ,OAAA;AAAA,MAAO;AAAA,IACvE;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS,EAAE,WAAW,EAAE,OAAO,SAAS,cAAc,UAAU,QAAQ,YAAA,EAAY;AAAA,IAAE;AAAA,IAExF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,UAAA,EAAU;AAAA,IAAE;AAAA,EAC7F;AAAA,EAEF,eAAe;AAAA,IACb,OAAO,KAAK,UAAUA,CAAa;AAAA,IAAG,UAAU;AAAA,IAAQ,aAAa;AAAA,IACrE,WAAW;AAAA,IAAU,kBAAkB;AAAA,EAAA;AAAA,EAEzC,UAAU;AAAA,IACR,aAAaE,GAAuC;AAClD,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDG,IAAQD,EAAIF,GAAQ,aAAa,QAAQ,GACzCI,IAAWF,EAAIF,GAAQ,YAAY,MAAM,GACzCK,IAAUH,EAAIF,GAAQ,eAAe,KAAK,GAC1CM,IAAQC,EAAwBP,EAAO,OAAOF,CAAa;AAEjE,aAAOU;AAAA,iCACoBL,CAAK;AAAA,YAC1BG,EAAM,IAAI,CAACG,MAAMD;AAAA,sBACPC,EAAE,GAAG,sDAAsDL,CAAQ,WAAWA,CAAQ,gBAAgBA,CAAQ,iCAAiCK,EAAE,KAAK,gGAAgGJ,CAAO,yDAAyDI,EAAE,IAAI;AAAA,WACvU,CAAC;AAAA;AAAA;AAAA,IAGR;AAAA,IACA,WAAWT,GAA+B;AACxC,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDG,IAAQD,EAAIF,GAAQ,aAAa,QAAQ,GACzCI,IAAWF,EAAIF,GAAQ,YAAY,IAAI,GACvCK,IAAUH,EAAIF,GAAQ,eAAe,KAAK,GAG1CU,IAFQH,EAAwBP,EAAO,OAAOF,CAAa,EAE7C;AAAA,QAAI,CAACW,MACvB,uDAAuDJ,CAAO,eAAeI,EAAE,GAAG,wIAAwIL,CAAQ,aAAaA,CAAQ,iDAAiDA,CAAQ,aAAaA,CAAQ,iBAAiBK,EAAE,KAAK,gGAAgGA,EAAE,IAAI;AAAA,MAAA,EACnc,KAAK;AAAA,CAAI,GAELE,IAAQ,gFAAgFR,CAAK,SAASO,CAAK;AACjH,aAAOE,EAAeD,GAAO,EAAE,SAAAV,GAAS,OAAAE,GAAO;AAAA,IACjD;AAAA,EAAA;AAEJ;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html as i } from "lit";
|
|
2
|
-
import { s as t, j as f, e as C } from "./index-
|
|
2
|
+
import { s as t, j as f, e as C } from "./index-CpMbWdgn.js";
|
|
3
3
|
const n = [
|
|
4
4
|
["Header 1", "Header 2", "Header 3"],
|
|
5
5
|
["Cell 1", "Cell 2", "Cell 3"],
|
|
@@ -41,23 +41,23 @@ const n = [
|
|
|
41
41
|
},
|
|
42
42
|
renderer: {
|
|
43
43
|
renderEditor(e) {
|
|
44
|
-
const
|
|
44
|
+
const b = t(e, "containerPadding", "10px"), s = t(e, "headerBg", "#f3f4f6"), p = t(e, "headerColor", "#111827"), l = t(e, "borderColor", "#e5e7eb"), a = t(e, "cellPadding", "8px 12px"), r = t(e, "fontSize", "14px"), d = f(e.tableData, n);
|
|
45
45
|
return i`
|
|
46
|
-
<div style="
|
|
46
|
+
<div style="overflow-x:auto;">
|
|
47
47
|
<table style="width:100%;border-collapse:collapse;font-size:${r};font-family:arial,sans-serif;">
|
|
48
|
-
<thead><tr>${d[0]?.map((o) => i`<th style="padding:${a};background:${
|
|
49
|
-
<tbody>${d.slice(1).map((o) => i`<tr>${o.map((
|
|
48
|
+
<thead><tr>${d[0]?.map((o) => i`<th style="padding:${a};background:${s};color:${p};border:1px solid ${l};text-align:left;font-weight:600;">${o}</th>`)}</tr></thead>
|
|
49
|
+
<tbody>${d.slice(1).map((o) => i`<tr>${o.map((c) => i`<td style="padding:${a};border:1px solid ${l};">${c}</td>`)}</tr>`)}</tbody>
|
|
50
50
|
</table>
|
|
51
51
|
</div>
|
|
52
52
|
`;
|
|
53
53
|
},
|
|
54
54
|
renderHtml(e) {
|
|
55
|
-
const
|
|
56
|
-
return C(x, { padding:
|
|
55
|
+
const b = t(e, "containerPadding", "10px"), s = t(e, "headerBg", "#f3f4f6"), p = t(e, "headerColor", "#111827"), l = t(e, "borderColor", "#e5e7eb"), a = t(e, "cellPadding", "8px 12px"), r = t(e, "fontSize", "14px"), d = f(e.tableData, n), o = "font-family:arial,helvetica,sans-serif;", c = (d[0] || []).map((g) => `<th style="padding:${a};background-color:${s};color:${p};border:1px solid ${l};text-align:left;font-weight:600;${o}font-size:${r};">${g}</th>`).join(""), h = d.slice(1).map((g) => `<tr>${g.map(($) => `<td style="padding:${a};border:1px solid ${l};${o}font-size:${r};">${$}</td>`).join("")}</tr>`).join(""), x = `<table cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:collapse;"><thead><tr>${c}</tr></thead><tbody>${h}</tbody></table>`;
|
|
56
|
+
return C(x, { padding: b });
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
};
|
|
60
60
|
export {
|
|
61
61
|
m as tableTool
|
|
62
62
|
};
|
|
63
|
-
//# sourceMappingURL=table-tool-
|
|
63
|
+
//# sourceMappingURL=table-tool-DeIQci5z.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table-tool-DeIQci5z.js","sources":["../src/tools/built-in/table-tool.ts"],"sourcesContent":["/**\n * @module table-tool\n *\n * Data table with configurable header styling and borders.\n *\n * Email compatibility: Uses standard HTML `<table>` with inline styles.\n * All borders, padding, and colors are inline for cross-client support.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str, jsonParse } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\n\nconst DEFAULT_DATA = [\n ['Header 1', 'Header 2', 'Header 3'],\n ['Cell 1', 'Cell 2', 'Cell 3'],\n ['Cell 4', 'Cell 5', 'Cell 6'],\n];\n\nexport const tableTool: LitToolDefinition = {\n name: 'table',\n label: 'Table',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18\"/><path d=\"M3 15h18\"/><path d=\"M9 3v18\"/><path d=\"M15 3v18\"/></svg>`,\n supportedDisplayModes: ['email', 'web'],\n position: 12,\n options: {\n table: {\n title: 'Table',\n options: { tableData: { label: 'Table Data (JSON)', defaultValue: JSON.stringify(DEFAULT_DATA), widget: 'rich_text' } },\n },\n style: {\n title: 'Style',\n options: {\n headerBg: { label: 'Header Background', defaultValue: '#f3f4f6', widget: 'color_picker' },\n headerColor: { label: 'Header Text Color', defaultValue: '#111827', widget: 'color_picker' },\n borderColor: { label: 'Border Color', defaultValue: '#e5e7eb', widget: 'color_picker' },\n cellPadding: { label: 'Cell Padding', defaultValue: '8px 12px', widget: 'text' },\n fontSize: { label: 'Font Size', defaultValue: '14px', widget: 'text' },\n },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n tableData: JSON.stringify(DEFAULT_DATA), headerBg: '#f3f4f6', headerColor: '#111827',\n borderColor: '#e5e7eb', cellPadding: '8px 12px', fontSize: '14px', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const hBg = str(values, 'headerBg', '#f3f4f6');\n const hColor = str(values, 'headerColor', '#111827');\n const bColor = str(values, 'borderColor', '#e5e7eb');\n const cPad = str(values, 'cellPadding', '8px 12px');\n const fSize = str(values, 'fontSize', '14px');\n const data = jsonParse<string[][]>(values.tableData, DEFAULT_DATA);\n\n return html`\n <div style=\"overflow-x:auto;\">\n <table style=\"width:100%;border-collapse:collapse;font-size:${fSize};font-family:arial,sans-serif;\">\n <thead><tr>${data[0]?.map((c) => html`<th style=\"padding:${cPad};background:${hBg};color:${hColor};border:1px solid ${bColor};text-align:left;font-weight:600;\">${c}</th>`)}</tr></thead>\n <tbody>${data.slice(1).map((row) => html`<tr>${row.map((c) => html`<td style=\"padding:${cPad};border:1px solid ${bColor};\">${c}</td>`)}</tr>`)}</tbody>\n </table>\n </div>\n `;\n },\n renderHtml(values: ContentValues): string {\n const padding = str(values, 'containerPadding', '10px');\n const hBg = str(values, 'headerBg', '#f3f4f6');\n const hColor = str(values, 'headerColor', '#111827');\n const bColor = str(values, 'borderColor', '#e5e7eb');\n const cPad = str(values, 'cellPadding', '8px 12px');\n const fSize = str(values, 'fontSize', '14px');\n const data = jsonParse<string[][]>(values.tableData, DEFAULT_DATA);\n const font = 'font-family:arial,helvetica,sans-serif;';\n\n const hCells = (data[0] || []).map((c) => `<th style=\"padding:${cPad};background-color:${hBg};color:${hColor};border:1px solid ${bColor};text-align:left;font-weight:600;${font}font-size:${fSize};\">${c}</th>`).join('');\n const bRows = data.slice(1).map((row) => `<tr>${row.map((c) => `<td style=\"padding:${cPad};border:1px solid ${bColor};${font}font-size:${fSize};\">${c}</td>`).join('')}</tr>`).join('');\n const inner = `<table cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" border=\"0\" style=\"border-collapse:collapse;\"><thead><tr>${hCells}</tr></thead><tbody>${bRows}</tbody></table>`;\n return emailTableCell(inner, { padding });\n },\n },\n};\n"],"names":["DEFAULT_DATA","tableTool","values","padding","str","hBg","hColor","bColor","cPad","fSize","data","jsonParse","html","c","row","font","hCells","bRows","inner","emailTableCell"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html as a } from "lit";
|
|
2
|
-
import { s as t, e as p } from "./index-
|
|
2
|
+
import { s as t, e as p } from "./index-CpMbWdgn.js";
|
|
3
3
|
const g = {
|
|
4
4
|
name: "timer",
|
|
5
5
|
label: "Timer",
|
|
@@ -39,16 +39,16 @@ const g = {
|
|
|
39
39
|
},
|
|
40
40
|
renderer: {
|
|
41
41
|
renderEditor(e) {
|
|
42
|
-
const
|
|
43
|
-
return a`<div style="padding
|
|
42
|
+
const l = t(e, "containerPadding", "10px"), i = t(e, "backgroundColor", "#1f2937"), n = t(e, "textColor", "#ffffff"), r = t(e, "fontSize", "32px"), o = t(e, "textAlign", "center");
|
|
43
|
+
return a`<div style="padding:0;"><div style="background:${i};color:${n};font-size:${r};text-align:${o};padding:20px;border-radius:4px;font-family:monospace;font-weight:bold;letter-spacing:4px;">00 : 00 : 00 : 00<div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS HRS MIN SEC</div></div></div>`;
|
|
44
44
|
},
|
|
45
45
|
renderHtml(e) {
|
|
46
|
-
const
|
|
47
|
-
return p(d, { padding:
|
|
46
|
+
const l = t(e, "containerPadding", "10px"), i = t(e, "backgroundColor", "#1f2937"), n = t(e, "textColor", "#ffffff"), r = t(e, "fontSize", "32px"), o = t(e, "textAlign", "center"), d = `<div style="background-color:${i};color:${n};font-size:${r};text-align:${o};padding:20px;border-radius:4px;font-family:'Courier New',monospace;font-weight:bold;letter-spacing:4px;"><div>00 : 00 : 00 : 00</div><div style="font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;">DAYS HRS MIN SEC</div></div>`;
|
|
47
|
+
return p(d, { padding: l, align: o });
|
|
48
48
|
}
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
export {
|
|
52
52
|
g as timerTool
|
|
53
53
|
};
|
|
54
|
-
//# sourceMappingURL=timer-tool-
|
|
54
|
+
//# sourceMappingURL=timer-tool-BVE1shO1.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"timer-tool-BVE1shO1.js","sources":["../src/tools/built-in/timer-tool.ts"],"sourcesContent":["/**\n * @module timer-tool\n *\n * Countdown timer display block.\n *\n * Email compatibility: Renders as a static styled block.\n * For live countdowns, integrate with a third-party countdown\n * image service (e.g. CountdownMail) in the `endDate` property.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\n\nexport const timerTool: LitToolDefinition = {\n name: 'timer',\n label: 'Timer',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg>`,\n supportedDisplayModes: ['email', 'web'],\n position: 11,\n options: {\n timer: {\n title: 'Timer',\n options: {\n endDate: { label: 'End Date (ISO)', defaultValue: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0], widget: 'text' },\n expiredMessage: { label: 'Expired Message', defaultValue: 'This offer has expired', widget: 'text' },\n },\n },\n style: {\n title: 'Style',\n options: {\n textAlign: { label: 'Align', defaultValue: 'center', widget: 'alignment' },\n backgroundColor: { label: 'Background', defaultValue: '#1f2937', widget: 'color_picker' },\n textColor: { label: 'Text Color', defaultValue: '#ffffff', widget: 'color_picker' },\n fontSize: { label: 'Font Size', defaultValue: '32px', widget: 'text' },\n },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n endDate: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0],\n expiredMessage: 'This offer has expired', textAlign: 'center',\n backgroundColor: '#1f2937', textColor: '#ffffff', fontSize: '32px', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const bg = str(values, 'backgroundColor', '#1f2937');\n const color = str(values, 'textColor', '#ffffff');\n const fontSize = str(values, 'fontSize', '32px');\n const align = str(values, 'textAlign', 'center');\n\n return html`<div style=\"padding:0;\"><div style=\"background:${bg};color:${color};font-size:${fontSize};text-align:${align};padding:20px;border-radius:4px;font-family:monospace;font-weight:bold;letter-spacing:4px;\">00 : 00 : 00 : 00<div style=\"font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;\">DAYS HRS MIN SEC</div></div></div>`;\n },\n renderHtml(values: ContentValues): string {\n const padding = str(values, 'containerPadding', '10px');\n const bg = str(values, 'backgroundColor', '#1f2937');\n const color = str(values, 'textColor', '#ffffff');\n const fontSize = str(values, 'fontSize', '32px');\n const align = str(values, 'textAlign', 'center');\n\n const inner = `<div style=\"background-color:${bg};color:${color};font-size:${fontSize};text-align:${align};padding:20px;border-radius:4px;font-family:'Courier New',monospace;font-weight:bold;letter-spacing:4px;\"><div>00 : 00 : 00 : 00</div><div style=\"font-size:11px;letter-spacing:8px;opacity:0.6;margin-top:4px;\">DAYS HRS MIN SEC</div></div>`;\n return emailTableCell(inner, { padding, align });\n },\n },\n};\n"],"names":["timerTool","values","padding","str","bg","color","fontSize","align","html","inner","emailTableCell"],"mappings":";;AAgBO,MAAMA,IAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,SAAS,KAAK;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,SAAS,EAAE,OAAO,kBAAkB,cAAc,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAQ,EAAE,cAAc,MAAM,GAAG,EAAE,CAAC,GAAG,QAAQ,OAAA;AAAA,QAC3H,gBAAgB,EAAE,OAAO,mBAAmB,cAAc,0BAA0B,QAAQ,OAAA;AAAA,MAAO;AAAA,IACrG;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,WAAW,EAAE,OAAO,SAAS,cAAc,UAAU,QAAQ,YAAA;AAAA,QAC7D,iBAAiB,EAAE,OAAO,cAAc,cAAc,WAAW,QAAQ,eAAA;AAAA,QACzE,WAAW,EAAE,OAAO,cAAc,cAAc,WAAW,QAAQ,eAAA;AAAA,QACnE,UAAU,EAAE,OAAO,aAAa,cAAc,QAAQ,QAAQ,OAAA;AAAA,MAAO;AAAA,IACvE;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,UAAA,EAAU;AAAA,IAAE;AAAA,EAC7F;AAAA,EAEF,eAAe;AAAA,IACb,SAAS,IAAI,KAAK,KAAK,QAAQ,IAAI,KAAQ,EAAE,YAAA,EAAc,MAAM,GAAG,EAAE,CAAC;AAAA,IACvE,gBAAgB;AAAA,IAA0B,WAAW;AAAA,IACrD,iBAAiB;AAAA,IAAW,WAAW;AAAA,IAAW,UAAU;AAAA,IAAQ,kBAAkB;AAAA,EAAA;AAAA,EAExF,UAAU;AAAA,IACR,aAAaC,GAAuC;AAClD,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDG,IAAKD,EAAIF,GAAQ,mBAAmB,SAAS,GAC7CI,IAAQF,EAAIF,GAAQ,aAAa,SAAS,GAC1CK,IAAWH,EAAIF,GAAQ,YAAY,MAAM,GACzCM,IAAQJ,EAAIF,GAAQ,aAAa,QAAQ;AAE/C,aAAOO,mDAAsDJ,CAAE,UAAUC,CAAK,cAAcC,CAAQ,eAAeC,CAAK;AAAA,IAC1H;AAAA,IACA,WAAWN,GAA+B;AACxC,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDG,IAAKD,EAAIF,GAAQ,mBAAmB,SAAS,GAC7CI,IAAQF,EAAIF,GAAQ,aAAa,SAAS,GAC1CK,IAAWH,EAAIF,GAAQ,YAAY,MAAM,GACzCM,IAAQJ,EAAIF,GAAQ,aAAa,QAAQ,GAEzCQ,IAAQ,gCAAgCL,CAAE,UAAUC,CAAK,cAAcC,CAAQ,eAAeC,CAAK;AACzG,aAAOG,EAAeD,GAAO,EAAE,SAAAP,GAAS,OAAAK,GAAO;AAAA,IACjD;AAAA,EAAA;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/button-tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,eAAO,MAAM,UAAU,EAAE,
|
|
1
|
+
{"version":3,"file":"button-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/button-tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,eAAO,MAAM,UAAU,EAAE,iBAiHxB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"heading-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/heading-tool.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"heading-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/heading-tool.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAiB7D,eAAO,MAAM,WAAW,EAAE,iBA6GzB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/image-tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,eAAO,MAAM,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"image-tool.d.ts","sourceRoot":"","sources":["../../../src/tools/built-in/image-tool.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAI7D,eAAO,MAAM,SAAS,EAAE,iBAwFvB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { str, num, jsonParse, imageUrl, imageMeta, linkAction, textContent, getFontFamily } from './value-extractor.js';
|
|
1
|
+
export { str, num, jsonParse, imageUrl, imageMeta, linkAction, textContent, getFontFamily, buttonColors } from './value-extractor.js';
|
|
2
2
|
export { emailTableCell, vmlRoundrectButton } from './email-html.js';
|
|
3
3
|
export type { TableCellOptions, VmlButtonOptions } from './email-html.js';
|
|
4
4
|
export type { SocialIcon, MenuItem, FormField } from './types.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tools/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tools/helpers/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACtI,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -55,6 +55,15 @@ export declare function textContent(values: ContentValues, fallback?: string): s
|
|
|
55
55
|
* If a Google Font URL is present, injects a stylesheet link into the document.
|
|
56
56
|
*/
|
|
57
57
|
export declare function getFontFamily(values: ContentValues, fallback?: string): string;
|
|
58
|
+
/**
|
|
59
|
+
* Extract button colors from either flat values or buttonColors object.
|
|
60
|
+
* Some editors store colors in a nested `buttonColors` object:
|
|
61
|
+
* `{ backgroundColor: null, buttonColors: { backgroundColor: '#c40909', color: '#fff' } }`
|
|
62
|
+
*/
|
|
63
|
+
export declare function buttonColors(values: ContentValues): {
|
|
64
|
+
bg: string;
|
|
65
|
+
color: string;
|
|
66
|
+
};
|
|
58
67
|
/**
|
|
59
68
|
* Safely parse a JSON string with a typed fallback.
|
|
60
69
|
* Used by tools that store structured data as JSON strings
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"value-extractor.d.ts","sourceRoot":"","sources":["../../../src/tools/helpers/value-extractor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM,CAK7E;AAED;;;;;;GAMG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAQ5E;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM/C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAS/E;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAalF;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,SAAK,GAAG,MAAM,CAuBxE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,SAA+B,GAAG,MAAM,CAqBpG;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,CAO3D"}
|
|
1
|
+
{"version":3,"file":"value-extractor.d.ts","sourceRoot":"","sources":["../../../src/tools/helpers/value-extractor.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAK,GAAG,MAAM,CAK7E;AAED;;;;;;GAMG;AACH,wBAAgB,GAAG,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,EAAE,QAAQ,SAAI,GAAG,MAAM,CAQ5E;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAM/C;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,CAS/E;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,MAAM,EAAE,aAAa,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAalF;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,SAAK,GAAG,MAAM,CAuBxE;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,aAAa,EAAE,QAAQ,SAA+B,GAAG,MAAM,CAqBpG;AAED;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,aAAa,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAajF;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,GAAG,CAAC,CAO3D"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { html as a } from "lit";
|
|
2
|
-
import { s as e, e as u } from "./index-
|
|
2
|
+
import { s as e, e as u } from "./index-CpMbWdgn.js";
|
|
3
3
|
function d(t) {
|
|
4
4
|
const i = t.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([a-zA-Z0-9_-]{11})/);
|
|
5
5
|
return i ? `https://img.youtube.com/vi/${i[1]}/maxresdefault.jpg` : null;
|
|
@@ -38,7 +38,7 @@ const m = {
|
|
|
38
38
|
renderer: {
|
|
39
39
|
renderEditor(t) {
|
|
40
40
|
const i = e(t, "containerPadding", "10px"), l = e(t, "url"), n = e(t, "thumbnailUrl") || d(l) || "", o = e(t, "textAlign", "center");
|
|
41
|
-
return n ? a`<div style="
|
|
41
|
+
return n ? a`<div style="text-align:${o};"><div style="position:relative;display:inline-block;max-width:100%;cursor:pointer;"><img src=${n} alt="Video thumbnail" style="display:block;max-width:100%;border-radius:4px;" /><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"><div style="width:60px;height:60px;background:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;">▶</div></div></div></div>` : a`<div style="text-align:${o};"><div style="background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;"><div style="font-size:48px;opacity:0.8;">▶</div><div style="font-size:12px;margin-top:8px;opacity:0.6;">${l || "Enter video URL"}</div></div></div>`;
|
|
42
42
|
},
|
|
43
43
|
renderHtml(t, i) {
|
|
44
44
|
const l = e(t, "containerPadding", "10px"), n = e(t, "url", "#"), o = e(t, "thumbnailUrl") || d(n) || "", r = e(t, "alt", "Video"), s = e(t, "textAlign", "center"), c = o ? `<img src="${o}" alt="${r}" width="${i.columnWidth}" style="display:block;max-width:100%;width:${i.columnWidth}px;border:0;" />` : '<div style="background:#0f172a;padding:40px;text-align:center;color:white;font-family:arial,sans-serif;font-size:16px;">▶ Watch Video</div>';
|
|
@@ -49,4 +49,4 @@ const m = {
|
|
|
49
49
|
export {
|
|
50
50
|
m as videoTool
|
|
51
51
|
};
|
|
52
|
-
//# sourceMappingURL=video-tool-
|
|
52
|
+
//# sourceMappingURL=video-tool-g1fIoCWW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"video-tool-g1fIoCWW.js","sources":["../src/tools/built-in/video-tool.ts"],"sourcesContent":["/**\n * @module video-tool\n *\n * Video embed block with thumbnail and play button overlay.\n * Supports YouTube and Vimeo URLs with auto-thumbnail detection.\n *\n * Email compatibility: Video cannot play in email — renders as\n * a linked thumbnail image with a play button overlay.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues, ExportRenderContext } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\n\n/** Extract YouTube video ID and return thumbnail URL */\nfunction getYouTubeThumbnail(url: string): string | null {\n const match = url.match(/(?:youtube\\.com\\/watch\\?v=|youtu\\.be\\/|youtube\\.com\\/embed\\/)([a-zA-Z0-9_-]{11})/);\n return match ? `https://img.youtube.com/vi/${match[1]}/maxresdefault.jpg` : null;\n}\n\nexport const videoTool: LitToolDefinition = {\n name: 'video',\n label: 'Video',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"5 3 19 12 5 21 5 3\"/></svg>`,\n supportedDisplayModes: ['email', 'web'],\n position: 10,\n options: {\n video: {\n title: 'Video',\n options: {\n url: { label: 'Video URL', defaultValue: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ', widget: 'text' },\n thumbnailUrl: { label: 'Thumbnail URL (auto)', defaultValue: '', widget: 'text' },\n alt: { label: 'Alt Text', defaultValue: 'Video', widget: 'text' },\n },\n },\n style: {\n title: 'Style',\n options: { textAlign: { label: 'Align', defaultValue: 'center', widget: 'alignment' } },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',\n thumbnailUrl: '', alt: 'Video', textAlign: 'center', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const url = str(values, 'url');\n const thumbnail = str(values, 'thumbnailUrl') || getYouTubeThumbnail(url) || '';\n const align = str(values, 'textAlign', 'center');\n\n if (!thumbnail) {\n return html`<div style=\"text-align:${align};\"><div style=\"background:#0f172a;border-radius:8px;padding:40px;text-align:center;color:white;font-family:sans-serif;\"><div style=\"font-size:48px;opacity:0.8;\">▶</div><div style=\"font-size:12px;margin-top:8px;opacity:0.6;\">${url || 'Enter video URL'}</div></div></div>`;\n }\n return html`<div style=\"text-align:${align};\"><div style=\"position:relative;display:inline-block;max-width:100%;cursor:pointer;\"><img src=${thumbnail} alt=\"Video thumbnail\" style=\"display:block;max-width:100%;border-radius:4px;\" /><div style=\"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\"><div style=\"width:60px;height:60px;background:rgba(0,0,0,0.7);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;\">▶</div></div></div></div>`;\n },\n renderHtml(values: ContentValues, ctx: ExportRenderContext): string {\n const padding = str(values, 'containerPadding', '10px');\n const url = str(values, 'url', '#');\n const thumbnail = str(values, 'thumbnailUrl') || getYouTubeThumbnail(url) || '';\n const alt = str(values, 'alt', 'Video');\n const align = str(values, 'textAlign', 'center');\n\n const imgTag = thumbnail\n ? `<img src=\"${thumbnail}\" alt=\"${alt}\" width=\"${ctx.columnWidth}\" style=\"display:block;max-width:100%;width:${ctx.columnWidth}px;border:0;\" />`\n : `<div style=\"background:#0f172a;padding:40px;text-align:center;color:white;font-family:arial,sans-serif;font-size:16px;\">▶ Watch Video</div>`;\n return emailTableCell(`<a href=\"${url}\" target=\"_blank\" style=\"text-decoration:none;\">${imgTag}</a>`, { padding, align });\n },\n },\n};\n"],"names":["getYouTubeThumbnail","url","match","videoTool","values","padding","str","thumbnail","align","html","ctx","alt","imgTag","emailTableCell"],"mappings":";;AAiBA,SAASA,EAAoBC,GAA4B;AACvD,QAAMC,IAAQD,EAAI,MAAM,kFAAkF;AAC1G,SAAOC,IAAQ,8BAA8BA,EAAM,CAAC,CAAC,uBAAuB;AAC9E;AAEO,MAAMC,IAA+B;AAAA,EAC1C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AAAA,EACN,uBAAuB,CAAC,SAAS,KAAK;AAAA,EACtC,UAAU;AAAA,EACV,SAAS;AAAA,IACP,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS;AAAA,QACP,KAAK,EAAE,OAAO,aAAa,cAAc,+CAA+C,QAAQ,OAAA;AAAA,QAChG,cAAc,EAAE,OAAO,wBAAwB,cAAc,IAAI,QAAQ,OAAA;AAAA,QACzE,KAAK,EAAE,OAAO,YAAY,cAAc,SAAS,QAAQ,OAAA;AAAA,MAAO;AAAA,IAClE;AAAA,IAEF,OAAO;AAAA,MACL,OAAO;AAAA,MACP,SAAS,EAAE,WAAW,EAAE,OAAO,SAAS,cAAc,UAAU,QAAQ,YAAA,EAAY;AAAA,IAAE;AAAA,IAExF,SAAS;AAAA,MACP,OAAO;AAAA,MACP,SAAS,EAAE,kBAAkB,EAAE,OAAO,WAAW,cAAc,QAAQ,QAAQ,UAAA,EAAU;AAAA,IAAE;AAAA,EAC7F;AAAA,EAEF,eAAe;AAAA,IACb,KAAK;AAAA,IACL,cAAc;AAAA,IAAI,KAAK;AAAA,IAAS,WAAW;AAAA,IAAU,kBAAkB;AAAA,EAAA;AAAA,EAEzE,UAAU;AAAA,IACR,aAAaC,GAAuC;AAClD,YAAMC,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDH,IAAMK,EAAIF,GAAQ,KAAK,GACvBG,IAAYD,EAAIF,GAAQ,cAAc,KAAKJ,EAAoBC,CAAG,KAAK,IACvEO,IAAQF,EAAIF,GAAQ,aAAa,QAAQ;AAE/C,aAAKG,IAGEE,2BAA8BD,CAAK,kGAAkGD,CAAS,kXAF5IE,2BAA8BD,CAAK,mOAAmOP,KAAO,iBAAiB;AAAA,IAGzS;AAAA,IACA,WAAWG,GAAuBM,GAAkC;AAClE,YAAML,IAAUC,EAAIF,GAAQ,oBAAoB,MAAM,GAChDH,IAAMK,EAAIF,GAAQ,OAAO,GAAG,GAC5BG,IAAYD,EAAIF,GAAQ,cAAc,KAAKJ,EAAoBC,CAAG,KAAK,IACvEU,IAAML,EAAIF,GAAQ,OAAO,OAAO,GAChCI,IAAQF,EAAIF,GAAQ,aAAa,QAAQ,GAEzCQ,IAASL,IACX,aAAaA,CAAS,UAAUI,CAAG,YAAYD,EAAI,WAAW,+CAA+CA,EAAI,WAAW,qBAC5H;AACJ,aAAOG,EAAe,YAAYZ,CAAG,mDAAmDW,CAAM,QAAQ,EAAE,SAAAP,GAAS,OAAAG,GAAO;AAAA,IAC1H;AAAA,EAAA;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@emabuild/core",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Drag & drop email editor Web Component — embeddable anywhere",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"customElements": "custom-elements.json",
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"lit": "^3.2.0",
|
|
23
|
-
"@emabuild/types": "0.
|
|
24
|
-
"@emabuild/email-renderer": "0.
|
|
23
|
+
"@emabuild/types": "0.2.0",
|
|
24
|
+
"@emabuild/email-renderer": "0.2.0"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"vite": "^6.2.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"form-tool-CduLiZgt.js","sources":["../src/tools/built-in/form-tool.ts"],"sourcesContent":["/**\n * @module form-tool\n *\n * Input form with configurable fields and submit button.\n * Only available in \"web\" display mode (forms don't work in email).\n *\n * Email compatibility: N/A — this tool is for web/popup display mode only.\n */\n\nimport { html, TemplateResult } from 'lit';\nimport type { ContentValues } from '@emabuild/types';\nimport type { LitToolDefinition } from '../tool-registry.js';\nimport { str, jsonParse } from '../helpers/value-extractor.js';\nimport { emailTableCell } from '../helpers/email-html.js';\nimport type { FormField } from '../helpers/types.js';\n\nconst DEFAULT_FIELDS: FormField[] = [\n { label: 'Name', name: 'name', type: 'text', placeholder: 'Your name' },\n { label: 'Email', name: 'email', type: 'email', placeholder: 'your@email.com' },\n];\n\nexport const formTool: LitToolDefinition = {\n name: 'form',\n label: 'Form',\n icon: `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M7 7h10\"/><path d=\"M7 12h10\"/><path d=\"M7 17h6\"/></svg>`,\n supportedDisplayModes: ['web'],\n position: 13,\n options: {\n form: {\n title: 'Form',\n options: {\n actionUrl: { label: 'Action URL', defaultValue: '#', widget: 'text' },\n method: { label: 'Method', defaultValue: 'POST', widget: 'text' },\n submitText: { label: 'Submit Text', defaultValue: 'Submit', widget: 'text' },\n fields: { label: 'Fields (JSON)', defaultValue: JSON.stringify(DEFAULT_FIELDS), widget: 'rich_text' },\n },\n },\n style: {\n title: 'Style',\n options: {\n buttonBg: { label: 'Button Color', defaultValue: '#3b82f6', widget: 'color_picker' },\n buttonColor: { label: 'Button Text', defaultValue: '#ffffff', widget: 'color_picker' },\n },\n },\n spacing: {\n title: 'Spacing',\n options: { containerPadding: { label: 'Padding', defaultValue: '10px', widget: 'padding' } },\n },\n },\n defaultValues: {\n actionUrl: '#', method: 'POST', submitText: 'Submit',\n fields: JSON.stringify(DEFAULT_FIELDS), buttonBg: '#3b82f6',\n buttonColor: '#ffffff', containerPadding: '10px',\n },\n renderer: {\n renderEditor(values: ContentValues): TemplateResult {\n const padding = str(values, 'containerPadding', '10px');\n const submitText = str(values, 'submitText', 'Submit');\n const btnBg = str(values, 'buttonBg', '#3b82f6');\n const btnColor = str(values, 'buttonColor', '#ffffff');\n const fields = jsonParse<FormField[]>(values.fields, DEFAULT_FIELDS);\n\n return html`\n <div style=\"padding:${padding};font-family:arial,sans-serif;\">\n ${fields.map((f) => html`\n <div style=\"margin-bottom:12px;\">\n <label style=\"display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;\">${f.label}</label>\n <input type=${f.type || 'text'} placeholder=${f.placeholder || ''} style=\"width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;\" />\n </div>\n `)}\n <button style=\"background:${btnBg};color:${btnColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;\">${submitText}</button>\n </div>\n `;\n },\n renderHtml(values: ContentValues): string {\n const padding = str(values, 'containerPadding', '10px');\n const actionUrl = str(values, 'actionUrl', '#');\n const method = str(values, 'method', 'POST');\n const submitText = str(values, 'submitText', 'Submit');\n const btnBg = str(values, 'buttonBg', '#3b82f6');\n const btnColor = str(values, 'buttonColor', '#ffffff');\n const fields = jsonParse<FormField[]>(values.fields, DEFAULT_FIELDS);\n const font = 'font-family:arial,helvetica,sans-serif;';\n\n const fieldsHtml = fields.map((f) =>\n `<div style=\"margin-bottom:12px;\"><label style=\"display:block;font-size:13px;color:#374151;margin-bottom:4px;font-weight:500;${font}\">${f.label}</label><input type=\"${f.type || 'text'}\" name=\"${f.name}\" placeholder=\"${f.placeholder || ''}\" style=\"width:100%;padding:8px 12px;border:1px solid #d1d5db;border-radius:4px;font-size:14px;box-sizing:border-box;${font}\" /></div>`\n ).join('');\n\n const inner = `<form action=\"${actionUrl}\" method=\"${method}\">${fieldsHtml}<button type=\"submit\" style=\"background-color:${btnBg};color:${btnColor};border:none;padding:10px 24px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;${font}\">${submitText}</button></form>`;\n return emailTableCell(inner, { padding });\n },\n },\n};\n"],"names":["DEFAULT_FIELDS","formTool","values","padding","str","submitText","btnBg","btnColor","fields","jsonParse","html","f","actionUrl","method","font","fieldsHtml","inner","emailTableCell"],"mappings":"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"}
|