@sealcode/jdd-editor 0.1.6 → 0.1.8

package/lib/src/inputs/component-input-list.js

@@ -0,0 +1,74 @@
+import { ComponentInput } from "./component-input.js";
+import { tempstream } from "tempstream";
+async function ComponentInputList({
+  state,
+  ctx,
+  arg_path,
+  arg,
+  value,
+  page,
+  makeJDDContext,
+  ...rest
+}) {
+  if (!value) {
+    value = [];
+  }
+  return tempstream`<fieldset
+		id="${`component-input-list-${arg_path.join("-")}`}"
+	>
+		<legend>${arg_path.at(-1)}</legend>
+		${value.map(
+    (value2, i, all_values) => tempstream`<div style="display: flex">
+					${ComponentInput({
+      ...rest,
+      ctx,
+      state,
+      arg_path: [...arg_path, i.toString()],
+      arg: arg.item_type,
+      value: value2,
+      page,
+      makeJDDContext
+    })}
+					${page.makeActionButton(
+      state,
+      {
+        action: "move_array_item_down",
+        label: "\u2193",
+        disabled: i == all_values.length - 1
+      },
+      arg_path,
+      i
+    )}
+					${page.makeActionButton(
+      state,
+      {
+        action: "move_array_item_up",
+        label: "\u2191",
+        disabled: i == 0
+      },
+      arg_path,
+      i
+    )}
+
+					${page.makeActionButton(
+      state,
+      { action: "remove_array_item", label: "\u274C" },
+      arg_path,
+      i
+    )}
+				</div>`
+  )}
+		${page.makeActionButton(
+    state,
+    {
+      action: "add_array_item",
+      label: "\u2795"
+    },
+    arg_path
+  )}
+	</fieldset>`;
+}
+export {
+  ComponentInputList
+};
+//# sourceMappingURL=component-input-list.js.map

package/lib/src/inputs/component-input-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-list.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, List } from \"@sealcode/jdd\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { tempstream } from \"tempstream\";\n\nexport async function ComponentInputList<\n\tState extends JDDPageState,\n\tT extends ComponentArgument<unknown>\n>({\n\tstate,\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\t...rest\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\targ: List<T, any>;\n\tvalue: T[];\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (!value) {\n\t\tvalue = [];\n\t}\n\treturn tempstream/* HTML */ `<fieldset\n\t\tid=\"${`component-input-list-${arg_path.join(\"-\")}`}\"\n\t>\n\t\t<legend>${arg_path.at(-1)!}</legend>\n\t\t${value.map(\n\t\t\t(value, i, all_values) =>\n\t\t\t\ttempstream`<div style=\"display: flex\">\n\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t...rest,\n\t\t\t\t\t\tctx,\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\targ_path: [...arg_path, i.toString()],\n\t\t\t\t\t\targ: arg.item_type,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\tpage,\n\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t})}\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\taction: \"move_array_item_down\",\n\t\t\t\t\t\t\tlabel: \"\u2193\",\n\t\t\t\t\t\t\tdisabled: i == all_values.length - 1,\n\t\t\t\t\t\t},\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\taction: \"move_array_item_up\",\n\t\t\t\t\t\t\tlabel: \"\u2191\",\n\t\t\t\t\t\t\tdisabled: i == 0,\n\t\t\t\t\t\t},\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\n\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\tstate,\n\t\t\t\t\t\t{ action: \"remove_array_item\", label: \"\u274C\" },\n\t\t\t\t\t\targ_path,\n\t\t\t\t\t\ti\n\t\t\t\t\t)}\n\t\t\t\t</div>`\n\t\t)}\n\t\t${page.makeActionButton(\n\t\t\tstate,\n\t\t\t{\n\t\t\t\taction: \"add_array_item\",\n\t\t\t\tlabel: \"\u2795\",\n\t\t\t},\n\t\t\targ_path\n\t\t)}\n\t</fieldset>`;\n}\n"],
+  "mappings": "AAKA,SAAS,sBAAsB;AAE/B,SAAS,kBAAkB;AAE3B,eAAsB,mBAGpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACJ,GAUoB;AACnB,MAAI,CAAC,OAAO;AACX,YAAQ,CAAC;AAAA,EACV;AACA,SAAO;AAAA,QACA,wBAAwB,SAAS,KAAK,GAAG;AAAA;AAAA,YAErC,SAAS,GAAG,EAAE;AAAA,IACtB,MAAM;AAAA,IACP,CAACA,QAAO,GAAG,eACV;AAAA,OACG,eAAe;AAAA,MAChB,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,UAAU,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC;AAAA,MACpC,KAAK,IAAI;AAAA,MACT,OAAAA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,OACC,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU,KAAK,WAAW,SAAS;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,OACE,KAAK;AAAA,MACN;AAAA,MACA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU,KAAK;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA;AAAA,OAEE,KAAK;AAAA,MACN;AAAA,MACA,EAAE,QAAQ,qBAAqB,OAAO,SAAI;AAAA,MAC1C;AAAA,MACA;AAAA,IACD;AAAA;AAAA,EAEH;AAAA,IACE,KAAK;AAAA,IACN;AAAA,IACA;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,IACR;AAAA,IACA;AAAA,EACD;AAAA;AAEF;",
+  "names": ["value"]
+}

package/lib/src/inputs/component-input-single-reference.js

@@ -0,0 +1,31 @@
+import { printArgPath } from "./print-arg-path.js";
+async function ComponentInputSingleReference({
+  ctx,
+  arg_path,
+  arg,
+  value,
+  onchange,
+  makeJDDContext
+}) {
+  const values = await arg.getValues(makeJDDContext(ctx));
+  const ret = `<div>
+			<label>
+				${arg_path.at(-1) || ""}
+				<select name="${`$${printArgPath(arg_path)}`}" onchange="${onchange}">
+					${values.sort((v1, v2) => v1.label > v2.label ? 1 : -1).map(
+    (v) => `<option
+								value="${v.value}"
+								${value == v.value ? "selected" : ""}
+							>
+								${v.label}
+							</option>`
+  ).join("")}
+				</select>
+			</label>
+		</div>`;
+  return ret;
+}
+export {
+  ComponentInputSingleReference
+};
+//# sourceMappingURL=component-input-single-reference.js.map

package/lib/src/inputs/component-input-single-reference.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-single-reference.ts"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport type { JDDContext, SingleReference } from \"@sealcode/jdd\";\nimport { printArgPath } from \"./print-arg-path.js\";\n\nexport async function ComponentInputSingleReference<\n\tState,\n\t// eslint-disable-next-line @typescript-eslint/no-explicit-any\n\tT extends SingleReference<any>\n>({\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tonchange,\n\tmakeJDDContext,\n}: {\n\tctx: Context;\n\tstate: State;\n\targ_path: string[];\n\targ: T;\n\tvalue: string;\n\tonchange?: string;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n}): Promise<string> {\n\tconst values = await arg.getValues(makeJDDContext(ctx));\n\tconst ret = `<div>\n\t\t\t<label>\n\t\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t\t<select name=\"${`$${printArgPath(arg_path)}`}\" onchange=\"${onchange}\">\n\t\t\t\t\t${values\n\t\t\t\t\t\t.sort((v1, v2) => (v1.label > v2.label ? 1 : -1))\n\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t(v) => /* HTML */ `<option\n\t\t\t\t\t\t\t\tvalue=\"${v.value}\"\n\t\t\t\t\t\t\t\t${value == v.value ? \"selected\" : \"\"}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t${v.label}\n\t\t\t\t\t\t\t</option>`\n\t\t\t\t\t\t)\n\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t</select>\n\t\t\t</label>\n\t\t</div>`;\n\treturn ret;\n}\n"],
+  "mappings": "AAEA,SAAS,oBAAoB;AAE7B,eAAsB,8BAIpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAQoB;AACnB,QAAM,SAAS,MAAM,IAAI,UAAU,eAAe,GAAG,CAAC;AACtD,QAAM,MAAM;AAAA;AAAA,MAEP,SAAS,GAAG,EAAE,KAAK;AAAA,oBACL,IAAI,aAAa,QAAQ,kBAAkB;AAAA,OACxD,OACA,KAAK,CAAC,IAAI,OAAQ,GAAG,QAAQ,GAAG,QAAQ,IAAI,EAAG,EAC/C;AAAA,IACA,CAAC,MAAiB;AAAA,iBACR,EAAE;AAAA,UACT,SAAS,EAAE,QAAQ,aAAa;AAAA;AAAA,UAEhC,EAAE;AAAA;AAAA,EAEN,EACC,KAAK,EAAE;AAAA;AAAA;AAAA;AAIb,SAAO;AACR;",
+  "names": []
+}

package/lib/src/inputs/component-input-structured.js

@@ -0,0 +1,36 @@
+import { ComponentInput } from "./component-input.js";
+async function ComponentInputStructured({
+  state,
+  ctx,
+  arg_path,
+  arg,
+  value,
+  page,
+  ...rest
+}) {
+  return `<fieldset
+		id="${`component-input-structured-${arg_path.join("-")}`}"
+	>
+		<legend>${arg_path.at(-1)}</legend>
+		${(await Promise.all(
+    Object.entries(arg.structure).map(async ([arg_name, arg2]) => {
+      const ret = `<div>
+						${await ComponentInput({
+        ctx,
+        state,
+        arg_path: [...arg_path, arg_name],
+        arg: arg2,
+        value: value[arg_name],
+        page,
+        ...rest
+      })}
+					</div>`;
+      return ret;
+    })
+  )).join("")}
+	</fieldset>`;
+}
+export {
+  ComponentInputStructured
+};
+//# sourceMappingURL=component-input-structured.js.map

package/lib/src/inputs/component-input-structured.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-structured.ts"],
+  "sourcesContent": ["import type { Context } from \"koa\";\nimport type { ComponentArgument, JDDContext, Structured } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\n\nexport async function ComponentInputStructured<\n\tT extends Structured<Record<string, ComponentArgument<unknown>>>\n>({\n\tstate,\n\tctx,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\t...rest\n}: {\n\tstate: JDDPageState;\n\tctx: Context;\n\targ_path: string[];\n\targ: T;\n\tvalue: Record<string, unknown>;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}) {\n\treturn /* HTML */ `<fieldset\n\t\tid=\"${`component-input-structured-${arg_path.join(\"-\")}`}\"\n\t>\n\t\t<legend>${arg_path.at(-1)}</legend>\n\t\t${(\n\t\t\tawait Promise.all(\n\t\t\t\tObject.entries(arg.structure).map(async ([arg_name, arg]) => {\n\t\t\t\t\tconst ret = `<div>\n\t\t\t\t\t\t${await ComponentInput({\n\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\targ_path: [...arg_path, arg_name],\n\t\t\t\t\t\t\targ,\n\t\t\t\t\t\t\tvalue: value[arg_name],\n\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t...rest,\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>`;\n\t\t\t\t\treturn ret;\n\t\t\t\t})\n\t\t\t)\n\t\t).join(\"\")}\n\t</fieldset>`;\n}\n"],
+  "mappings": "AAGA,SAAS,sBAAsB;AAI/B,eAAsB,yBAEpB;AAAA,EACD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,KACG;AACJ,GASG;AACF,SAAkB;AAAA,QACX,8BAA8B,SAAS,KAAK,GAAG;AAAA;AAAA,YAE3C,SAAS,GAAG,EAAE;AAAA,KAEvB,MAAM,QAAQ;AAAA,IACb,OAAO,QAAQ,IAAI,SAAS,EAAE,IAAI,OAAO,CAAC,UAAUA,IAAG,MAAM;AAC5D,YAAM,MAAM;AAAA,QACT,MAAM,eAAe;AAAA,QACtB;AAAA,QACA;AAAA,QACA,UAAU,CAAC,GAAG,UAAU,QAAQ;AAAA,QAChC,KAAAA;AAAA,QACA,OAAO,MAAM;AAAA,QACb;AAAA,QACA,GAAG;AAAA,MACJ,CAAC;AAAA;AAEF,aAAO;AAAA,IACR,CAAC;AAAA,EACF,GACC,KAAK,EAAE;AAAA;AAEX;",
+  "names": ["arg"]
+}

package/lib/src/inputs/component-input-table.js

@@ -0,0 +1,228 @@
+import { Markdown } from "@sealcode/jdd";
+import { isTableHeader } from "@sealcode/jdd";
+import { tempstream } from "tempstream";
+import { ComponentInput } from "./component-input.js";
+async function ComponentInputTable({
+  state,
+  arg_path,
+  ctx,
+  arg,
+  value,
+  page,
+  makeJDDContext,
+  makeAssetURL
+}) {
+  if (!value) {
+    value = await arg.getEmptyValue(makeJDDContext(ctx));
+  }
+  const show_paste = arg.cell_type instanceof Markdown && arg.header_type instanceof Markdown;
+  return tempstream`<fieldset>
+		<legend>${arg_path.at(-1)}</legend>
+		<div>
+			${show_paste ? `<input
+						type="button"
+						value="paste"
+						placeholder="paste table here"
+						data-jdd-table-paste-argpath-value="${arg_path.join(
+    "."
+  )}"
+						data-controller="jdd-table-paste"
+				  />` : ""}
+			<table
+				class="jdd-component-input--table"
+				style="position: relative; /* necessary for sticky th*/"
+			>
+				<tbody>
+					<tr>
+						<td></td>
+						${[...Array(arg.getColumnsCount(value)).keys()].map(
+    (column_index) => `<th
+									class="sticky sticky--top subdued"
+								>
+									${page.makeActionButton(
+      state,
+      {
+        action: "remove_table_column",
+        label: "Remove column",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-delete-column.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      column_index
+    )}
+									${column_index >= arg.getColumnsCount(value) - 1 ? "" : page.makeActionButton(
+      state,
+      {
+        action: "move_table_column_right",
+        label: "Move column to the right",
+        content: `<img
+														width="20"
+														height="20"
+														src="${makeAssetURL(
+          "icons/table-move-column-right.svg"
+        )}"
+													/>`
+      },
+      arg_path,
+      column_index
+    )}
+								</th>`
+  ).join("")}
+					</tr>
+					${value.rows.map(
+    (row, row_index) => tempstream`<tr>
+							<td class="sticky sticky--left subdued">
+								<div
+									style="display: flex; flex-flow: column; row-gap: 5px;"
+								>
+									${page.makeActionButton(
+      state,
+      {
+        action: "remove_table_row",
+        label: "Remove row",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-delete-row.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      row_index
+    )}
+									${page.makeActionButton(
+      state,
+      {
+        action: "move_table_row_down",
+        label: "Move this row down",
+        content: `<img
+												width="20"
+												height="20"
+												src="${makeAssetURL(
+          "icons/table-move-row-down.svg"
+        )}"
+											/>`
+      },
+      arg_path,
+      row_index
+    )}
+								</div>
+							</td>
+							${isTableHeader(row) ? tempstream`<th
+										colspan="${arg.getColumnsCount(value).toString()}"
+								  >
+										${ComponentInput({
+      state,
+      ctx,
+      arg_path: [
+        ...arg_path,
+        "rows",
+        row_index.toString(),
+        "header_content"
+      ],
+      arg: arg.header_type,
+      value: row.header_content,
+      page,
+      makeJDDContext,
+      makeAssetURL
+    })}
+								  </th>` : row.cells.map(
+      (cell, cell_index) => tempstream`<td>
+											${ComponentInput({
+        ctx,
+        state,
+        arg_path: [
+          ...arg_path,
+          "rows",
+          row_index.toString(),
+          "cells",
+          cell_index.toString()
+        ],
+        arg: arg.cell_type,
+        value: cell,
+        page,
+        makeJDDContext,
+        makeAssetURL
+      })}
+										</td>`
+    )}
+							${row_index == 0 ? `<td
+										class="subdued"
+										rowspan="${value.rows.length.toString()}"
+								  >
+										${page.makeActionButton(
+      state,
+      {
+        action: "add_table_column",
+        label: "Add column",
+        content: `<img
+													width="20"
+													height="20"
+													src="${makeAssetURL(
+          "icons/table-add-column-right.svg"
+        )}"
+												/>`
+      },
+      arg_path
+    )}
+								  </td>` : ""}
+						</tr>`
+  )}
+					<tr>
+						<td
+							class="subdued"
+							colspan="{(arg.getColumnsCount(value)"
+							+
+							1).toString()}
+						>
+							${page.makeActionButton(
+    state,
+    {
+      action: "add_table_row",
+      label: "Add table row",
+      content: `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+        "icons/table-add-row-below.svg"
+      )}"
+									/>`
+    },
+    arg_path,
+    arg.getColumnsCount(value),
+    void 0
+  )}
+							${page.makeActionButton(
+    state,
+    {
+      action: "add_table_row",
+      label: "Add table header",
+      content: `<img
+										width="20"
+										height="20"
+										src="${makeAssetURL(
+        "icons/table-add-column-header-below.svg"
+      )}"
+									/>`
+    },
+    arg_path,
+    arg.getColumnsCount(value),
+    "header"
+  )}
+						</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</fieldset>`;
+}
+export {
+  ComponentInputTable
+};
+//# sourceMappingURL=component-input-table.js.map

package/lib/src/inputs/component-input-table.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input-table.ts"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-non-null-assertion */\nimport type { JDDContext, Table, TableData } from \"@sealcode/jdd\";\nimport { Markdown } from \"@sealcode/jdd\";\nimport { isTableHeader } from \"@sealcode/jdd\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { Context } from \"koa\";\nimport { tempstream } from \"tempstream\";\nimport { ComponentInput } from \"./component-input.js\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\n\nexport async function ComponentInputTable<\n\tState extends JDDPageState,\n\tCellType,\n\tHeaderType\n>({\n\tstate,\n\targ_path,\n\tctx,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: Table<CellType, HeaderType>;\n\tvalue: TableData<CellType, HeaderType>;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (!value) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\n\tconst show_paste =\n\t\targ.cell_type instanceof Markdown &&\n\t\targ.header_type instanceof Markdown;\n\n\treturn tempstream/* HTML */ `<fieldset>\n\t\t<legend>${arg_path.at(-1)!}</legend>\n\t\t<div>\n\t\t\t${show_paste\n\t\t\t\t? /* HTML */ `<input\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvalue=\"paste\"\n\t\t\t\t\t\tplaceholder=\"paste table here\"\n\t\t\t\t\t\tdata-jdd-table-paste-argpath-value=\"${arg_path.join(\n\t\t\t\t\t\t\t\".\"\n\t\t\t\t\t\t)}\"\n\t\t\t\t\t\tdata-controller=\"jdd-table-paste\"\n\t\t\t\t  />`\n\t\t\t\t: \"\"}\n\t\t\t<table\n\t\t\t\tclass=\"jdd-component-input--table\"\n\t\t\t\tstyle=\"position: relative; /* necessary for sticky th*/\"\n\t\t\t>\n\t\t\t\t<tbody>\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td></td>\n\t\t\t\t\t\t${[...Array(arg.getColumnsCount(value)).keys()]\n\t\t\t\t\t\t\t.map(\n\t\t\t\t\t\t\t\t(column_index) => /* HTML */ `<th\n\t\t\t\t\t\t\t\t\tclass=\"sticky sticky--top subdued\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_column\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove column\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-column.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t${column_index >=\n\t\t\t\t\t\t\t\t\targ.getColumnsCount(value) - 1\n\t\t\t\t\t\t\t\t\t\t? \"\"\n\t\t\t\t\t\t\t\t\t\t: page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_column_right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move column to the right\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\t\t\tcolumn_index\n\t\t\t\t\t\t\t\t\t\t  )}\n\t\t\t\t\t\t\t\t</th>`\n\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t.join(\"\")}\n\t\t\t\t\t</tr>\n\t\t\t\t\t${value.rows.map(\n\t\t\t\t\t\t(row, row_index) => tempstream/* HTML */ `<tr>\n\t\t\t\t\t\t\t<td class=\"sticky sticky--left subdued\">\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tstyle=\"display: flex; flex-flow: column; row-gap: 5px;\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"remove_table_row\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Remove row\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-delete-row.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\taction: \"move_table_row_down\",\n\t\t\t\t\t\t\t\t\t\t\tlabel: \"Move this row down\",\n\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-move-row-down.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\t\t\trow_index\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</td>\n\t\t\t\t\t\t\t${isTableHeader(row)\n\t\t\t\t\t\t\t\t? /* HTML */ tempstream`<th\n\t\t\t\t\t\t\t\t\t\tcolspan=\"${arg.getColumnsCount(value).toString()}\"\n\t\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\"header_content\",\n\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\targ: arg.header_type,\n\t\t\t\t\t\t\t\t\t\t\tvalue: row.header_content,\n\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t  </th>`\n\t\t\t\t\t\t\t\t: row.cells.map(\n\t\t\t\t\t\t\t\t\t\t(\n\t\t\t\t\t\t\t\t\t\t\tcell,\n\t\t\t\t\t\t\t\t\t\t\tcell_index\n\t\t\t\t\t\t\t\t\t\t) => tempstream/* HTML */ `<td>\n\t\t\t\t\t\t\t\t\t\t\t${ComponentInput({\n\t\t\t\t\t\t\t\t\t\t\t\tctx,\n\t\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t\targ_path: [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...arg_path,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"rows\",\n\t\t\t\t\t\t\t\t\t\t\t\t\trow_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"cells\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tcell_index.toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t],\n\t\t\t\t\t\t\t\t\t\t\t\targ: arg.cell_type,\n\t\t\t\t\t\t\t\t\t\t\t\tvalue: cell,\n\t\t\t\t\t\t\t\t\t\t\t\tpage,\n\t\t\t\t\t\t\t\t\t\t\t\tmakeJDDContext,\n\t\t\t\t\t\t\t\t\t\t\t\tmakeAssetURL,\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t</td>`\n\t\t\t\t\t\t\t\t  )}\n\t\t\t\t\t\t\t${row_index == 0\n\t\t\t\t\t\t\t\t? /* HTML */ `<td\n\t\t\t\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\t\t\t\trowspan=\"${value.rows.length.toString()}\"\n\t\t\t\t\t\t\t\t  >\n\t\t\t\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\taction: \"add_table_column\",\n\t\t\t\t\t\t\t\t\t\t\t\tlabel: \"Add column\",\n\t\t\t\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-right.svg\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\t\t\t\targ_path\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t  </td>`\n\t\t\t\t\t\t\t\t: \"\"}\n\t\t\t\t\t\t</tr>`\n\t\t\t\t\t)}\n\t\t\t\t\t<tr>\n\t\t\t\t\t\t<td\n\t\t\t\t\t\t\tclass=\"subdued\"\n\t\t\t\t\t\t\tcolspan=\"{(arg.getColumnsCount(value)\"\n\t\t\t\t\t\t\t+\n\t\t\t\t\t\t\t1).toString()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table row\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-row-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\tundefined\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t${page.makeActionButton(\n\t\t\t\t\t\t\t\tstate,\n\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\taction: \"add_table_row\",\n\t\t\t\t\t\t\t\t\tlabel: \"Add table header\",\n\t\t\t\t\t\t\t\t\tcontent: /* HTML */ `<img\n\t\t\t\t\t\t\t\t\t\twidth=\"20\"\n\t\t\t\t\t\t\t\t\t\theight=\"20\"\n\t\t\t\t\t\t\t\t\t\tsrc=\"${makeAssetURL(\n\t\t\t\t\t\t\t\t\t\t\t\"icons/table-add-column-header-below.svg\"\n\t\t\t\t\t\t\t\t\t\t)}\"\n\t\t\t\t\t\t\t\t\t/>`,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t\targ_path,\n\t\t\t\t\t\t\t\targ.getColumnsCount(value),\n\t\t\t\t\t\t\t\t\"header\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</td>\n\t\t\t\t\t</tr>\n\t\t\t\t</tbody>\n\t\t\t</table>\n\t\t</div>\n\t</fieldset>`;\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/lib/src/inputs/component-input.js

@@ -0,0 +1,164 @@
+import { printArgPath } from "./print-arg-path.js";
+import { SingleReference } from "@sealcode/jdd";
+import {
+  ComponentArguments,
+  Enum,
+  Image,
+  List,
+  Structured,
+  Table
+} from "@sealcode/jdd";
+import { ComponentInputStructured } from "./component-input-structured.js";
+import { ComponentInputList } from "./component-input-list.js";
+import { ComponentInputEnum } from "./component-input-enum.js";
+import { ComponentInputImage } from "./component-input-image.js";
+import { ComponentInputTable } from "./component-input-table.js";
+import { ComponentInputSingleReference } from "./component-input-single-reference.js";
+import { is, predicates } from "@sealcode/ts-predicates";
+import { tempstream } from "tempstream";
+const actionName = "Components";
+const absoluteUrlPattern = "http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)";
+async function ComponentInput({
+  ctx,
+  state,
+  arg_path,
+  arg,
+  value,
+  page,
+  makeJDDContext,
+  makeAssetURL
+}) {
+  if (value === void 0) {
+    value = await arg.getEmptyValue(makeJDDContext(ctx));
+  }
+  if (arg instanceof List) {
+    return ComponentInputList({
+      ctx,
+      state,
+      arg_path,
+      arg,
+      value,
+      page,
+      makeJDDContext,
+      makeAssetURL
+    });
+  }
+  const argType = arg.getTypeName();
+  const isUrlAbsolute = arg instanceof ComponentArguments.URL && arg.urlType === "absolute";
+  const inputType = isUrlAbsolute ? "url" : "text";
+  if (arg instanceof Structured) {
+    return ComponentInputStructured({
+      ctx,
+      state,
+      arg_path,
+      arg,
+      value,
+      page,
+      makeJDDContext,
+      makeAssetURL
+    });
+  }
+  if (arg instanceof SingleReference) {
+    return ComponentInputSingleReference({
+      ctx,
+      state,
+      arg_path,
+      arg,
+      value,
+      onchange: page.rerender(),
+      makeJDDContext
+    });
+  }
+  if (arg instanceof Enum) {
+    return ComponentInputEnum({
+      state,
+      arg_path,
+      arg,
+      value,
+      onchange: page.rerender()
+    });
+  }
+  if (arg instanceof Image) {
+    return ComponentInputImage({
+      ctx,
+      state,
+      arg_path,
+      arg,
+      value,
+      page,
+      makeJDDContext
+    });
+  }
+  if (arg instanceof Table) {
+    return ComponentInputTable({
+      ctx,
+      state,
+      arg_path,
+      arg,
+      value,
+      page,
+      makeJDDContext,
+      makeAssetURL
+    });
+  }
+  const inputElement = () => {
+    switch (argType) {
+      case "url":
+        return tempstream`
+					<input
+						type="url"
+						name="{$.component_args${printArgPath(arg_path)}}"
+						value="{value"
+						as
+						string}
+						size="40"
+						pattern="{isUrlAbsolute"
+						?
+						absoluteUrlPattern
+						:
+						undefined}
+					/>
+				`;
+      case "number":
+        return tempstream`
+					<input type="number"
+					name={$.component_args${printArgPath(arg_path)}}
+					value={(value || "").toString()} min={ arg instanceof Number
+					? arg.min.toString() : undefined } max={ arg instanceof
+					Number ? arg.max.toString() : undefined } step={ arg
+					instanceof Number ? arg.step.toString() : undefined } />
+				`;
+      default:
+        return tempstream`
+					<input type="${inputType}"
+					name="${`$${printArgPath(arg_path)}`}"
+					value="${is(value, predicates.string) ? value : ""}"
+					size="40"
+					${isUrlAbsolute ? `pattern="${absoluteUrlPattern}"` : ""}"
+					/>
+				`;
+    }
+  };
+  return `<div>
+		<label>
+			${arg_path.at(-1) || ""}
+			${argType == "markdown" ? `<div class="grow-wrap">
+						<textarea
+							name="${`$${printArgPath(arg_path)}`}"
+							onblur="${page.rerender()}"
+							cols="40"
+							data-controller="markdown-textarea submit-on-input"
+							data-action="autogrow-textarea#autogrow blur->autogrow-textarea#autogrow resize->autogrow-textarea#autogrow submit-on-input#sendValues focus->submit-on-input#makePermanent blur->submit-on-input#makeNotPermanent"
+							autocomplete="off"
+						>
+${is(value, predicates.string) ? value : ""}</textarea
+						>
+				  </div>` : inputElement()}
+		</label>
+	</div>`;
+}
+export {
+  ComponentInput,
+  actionName
+};
+//# sourceMappingURL=component-input.js.map

package/lib/src/inputs/component-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/component-input.ts"],
+  "sourcesContent": ["import { printArgPath } from \"./print-arg-path.js\";\nimport type { Context } from \"koa\";\nimport type {\n\tComponentArgument,\n\tJDDContext,\n\tTableData,\n\tNumber,\n} from \"@sealcode/jdd\";\nimport { SingleReference } from \"@sealcode/jdd\";\nimport {\n\tComponentArguments,\n\tEnum,\n\tImage,\n\tList,\n\tStructured,\n\tTable,\n} from \"@sealcode/jdd\";\nimport { ComponentInputStructured } from \"./component-input-structured.js\";\nimport type { StatefulPage } from \"@sealcode/sealgen\";\nimport type { ComponentPreviewActions } from \"../component-preview-actions.js\";\nimport { ComponentInputList } from \"./component-input-list.js\";\nimport type { JDDPageState } from \"../jdd-page.js\";\nimport { ComponentInputEnum } from \"./component-input-enum.js\";\nimport { ComponentInputImage } from \"./component-input-image.js\";\nimport { ComponentInputTable } from \"./component-input-table.js\";\nimport type { FilePointer } from \"@sealcode/file-manager\";\nimport { ComponentInputSingleReference } from \"./component-input-single-reference.js\";\nimport { is, predicates } from \"@sealcode/ts-predicates\";\nimport { tempstream } from \"tempstream\";\n\nexport const actionName = \"Components\";\nconst absoluteUrlPattern = \"http(s?)(://)((www.)?)(([^.]+).)?([a-zA-z0-9-_]+)\";\n\nexport async function ComponentInput<State extends JDDPageState, T>({\n\tctx,\n\tstate,\n\targ_path,\n\targ,\n\tvalue,\n\tpage,\n\tmakeJDDContext,\n\tmakeAssetURL,\n}: {\n\tstate: State;\n\tctx: Context;\n\targ_path: string[];\n\targ: ComponentArgument<T>;\n\tvalue: T;\n\tpage: StatefulPage<JDDPageState, typeof ComponentPreviewActions>;\n\tmakeJDDContext: (ctx: Context) => JDDContext;\n\tmakeAssetURL: (asset: string) => string;\n}): Promise<string> {\n\tif (value === undefined) {\n\t\tvalue = await arg.getEmptyValue(makeJDDContext(ctx));\n\t}\n\tif (arg instanceof List) {\n\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\treturn ComponentInputList({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as T[],\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst argType = arg.getTypeName();\n\tconst isUrlAbsolute =\n\t\targ instanceof ComponentArguments.URL && arg.urlType === \"absolute\";\n\tconst inputType = isUrlAbsolute ? \"url\" : \"text\";\n\n\tif (arg instanceof Structured) {\n\t\treturn ComponentInputStructured({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as Record<string, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tif (arg instanceof SingleReference) {\n\t\treturn ComponentInputSingleReference({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Enum) {\n\t\treturn ComponentInputEnum({\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as string,\n\t\t\tonchange: page.rerender(),\n\t\t});\n\t}\n\n\tif (arg instanceof Image) {\n\t\treturn ComponentInputImage({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as FilePointer,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t});\n\t}\n\n\tif (arg instanceof Table) {\n\t\treturn ComponentInputTable({\n\t\t\tctx,\n\t\t\tstate,\n\t\t\targ_path,\n\t\t\targ,\n\t\t\t// eslint-disable-next-line @typescript-eslint/consistent-type-assertions\n\t\t\tvalue: value as TableData<unknown, unknown>,\n\t\t\tpage,\n\t\t\tmakeJDDContext,\n\t\t\tmakeAssetURL,\n\t\t});\n\t}\n\n\tconst inputElement = () => {\n\t\tswitch (argType) {\n\t\t\tcase \"url\":\n\t\t\t\treturn tempstream/* HTML */ `\n\t\t\t\t\t<input\n\t\t\t\t\t\ttype=\"url\"\n\t\t\t\t\t\tname=\"{$.component_args${printArgPath(arg_path)}}\"\n\t\t\t\t\t\tvalue=\"{value\"\n\t\t\t\t\t\tas\n\t\t\t\t\t\tstring}\n\t\t\t\t\t\tsize=\"40\"\n\t\t\t\t\t\tpattern=\"{isUrlAbsolute\"\n\t\t\t\t\t\t?\n\t\t\t\t\t\tabsoluteUrlPattern\n\t\t\t\t\t\t:\n\t\t\t\t\t\tundefined}\n\t\t\t\t\t/>\n\t\t\t\t`;\n\t\t\tcase \"number\":\n\t\t\t\treturn tempstream/* HTML */ `\n\t\t\t\t\t<input type=\"number\"\n\t\t\t\t\tname={$.component_args${printArgPath(arg_path)}}\n\t\t\t\t\tvalue={(value || \"\").toString()} min={ arg instanceof Number\n\t\t\t\t\t? arg.min.toString() : undefined } max={ arg instanceof\n\t\t\t\t\tNumber ? arg.max.toString() : undefined } step={ arg\n\t\t\t\t\tinstanceof Number ? arg.step.toString() : undefined } />\n\t\t\t\t`;\n\t\t\tdefault:\n\t\t\t\treturn tempstream/* HTML */ `\n\t\t\t\t\t<input type=\"${inputType}\"\n\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\tvalue=\"${is(value, predicates.string) ? value : \"\"}\"\n\t\t\t\t\tsize=\"40\"\n\t\t\t\t\t${isUrlAbsolute ? `pattern=\"${absoluteUrlPattern}\"` : \"\"}\"\n\t\t\t\t\t/>\n\t\t\t\t`;\n\t\t}\n\t};\n\n\treturn /* HTML */ `<div>\n\t\t<label>\n\t\t\t${arg_path.at(-1) || \"\"}\n\t\t\t${argType == \"markdown\"\n\t\t\t\t? /* HTML */ `<div class=\"grow-wrap\">\n\t\t\t\t\t\t<textarea\n\t\t\t\t\t\t\tname=\"${`$${printArgPath(arg_path)}`}\"\n\t\t\t\t\t\t\tonblur=\"${page.rerender()}\"\n\t\t\t\t\t\t\tcols=\"40\"\n\t\t\t\t\t\t\tdata-controller=\"markdown-textarea submit-on-input\"\n\t\t\t\t\t\t\tdata-action=\"autogrow-textarea#autogrow blur->autogrow-textarea#autogrow resize->autogrow-textarea#autogrow submit-on-input#sendValues focus->submit-on-input#makePermanent blur->submit-on-input#makeNotPermanent\"\n\t\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\t>\n${is(value, predicates.string) ? value : \"\"}</textarea\n\t\t\t\t\t\t>\n\t\t\t\t  </div>`\n\t\t\t\t: inputElement()}\n\t\t</label>\n\t</div>`;\n}\n"],
+  "mappings": "AAAA,SAAS,oBAAoB;AAQ7B,SAAS,uBAAuB;AAChC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,gCAAgC;AAGzC,SAAS,0BAA0B;AAEnC,SAAS,0BAA0B;AACnC,SAAS,2BAA2B;AACpC,SAAS,2BAA2B;AAEpC,SAAS,qCAAqC;AAC9C,SAAS,IAAI,kBAAkB;AAC/B,SAAS,kBAAkB;AAEpB,MAAM,aAAa;AAC1B,MAAM,qBAAqB;AAE3B,eAAsB,eAA8C;AAAA,EACnE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GASoB;AACnB,MAAI,UAAU,QAAW;AACxB,YAAQ,MAAM,IAAI,cAAc,eAAe,GAAG,CAAC;AAAA,EACpD;AACA,MAAI,eAAe,MAAM;AAExB,WAAO,mBAAmB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,QAAM,UAAU,IAAI,YAAY;AAChC,QAAM,gBACL,eAAe,mBAAmB,OAAO,IAAI,YAAY;AAC1D,QAAM,YAAY,gBAAgB,QAAQ;AAE1C,MAAI,eAAe,YAAY;AAC9B,WAAO,yBAAyB;AAAA,MAC/B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,iBAAiB;AACnC,WAAO,8BAA8B;AAAA,MACpC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,UAAU,KAAK,SAAS;AAAA,MACxB;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,MAAM;AACxB,WAAO,mBAAmB;AAAA,MACzB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA,UAAU,KAAK,SAAS;AAAA,IACzB,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,OAAO;AACzB,WAAO,oBAAoB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,MAAI,eAAe,OAAO;AACzB,WAAO,oBAAoB;AAAA,MAC1B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAC;AAAA,EACF;AAEA,QAAM,eAAe,MAAM;AAC1B,YAAQ;AAAA,WACF;AACJ,eAAO;AAAA;AAAA;AAAA,+BAGoB,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAY5C;AACJ,eAAO;AAAA;AAAA,6BAEkB,aAAa,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,eAAO;AAAA,oBACS;AAAA,aACP,IAAI,aAAa,QAAQ;AAAA,cACxB,GAAG,OAAO,WAAW,MAAM,IAAI,QAAQ;AAAA;AAAA,OAE9C,gBAAgB,YAAY,wBAAwB;AAAA;AAAA;AAAA;AAAA,EAI1D;AAEA,SAAkB;AAAA;AAAA,KAEd,SAAS,GAAG,EAAE,KAAK;AAAA,KACnB,WAAW,aACC;AAAA;AAAA,eAEF,IAAI,aAAa,QAAQ;AAAA,iBACvB,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM7B,GAAG,OAAO,WAAW,MAAM,IAAI,QAAQ;AAAA;AAAA,gBAGnC,aAAa;AAAA;AAAA;AAGnB;",
+  "names": []
+}

package/lib/src/inputs/print-arg-path.js

@@ -0,0 +1,7 @@
+function printArgPath(path) {
+  return path.map((e) => `[${e}]`).join("");
+}
+export {
+  printArgPath
+};
+//# sourceMappingURL=print-arg-path.js.map

package/lib/src/inputs/print-arg-path.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/inputs/print-arg-path.ts"],
+  "sourcesContent": ["export function printArgPath(path: string[]): string {\n\treturn path.map((e) => `[${e}]`).join(\"\");\n}\n"],
+  "mappings": "AAAO,SAAS,aAAa,MAAwB;AACpD,SAAO,KAAK,IAAI,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,EAAE;AACzC;",
+  "names": []
+}