@webiny/app-admin 0.0.0-unstable.496cf268ac → 0.0.0-unstable.5387e5f7c8

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { SelectableTemplate } from "./SelectableTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+const TemplateCard = ({ template, onSelect })=>/*#__PURE__*/ react.createElement(SelectableTemplate, {
+        template: template,
+        onSelect: onSelect,
+        className: "flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm"
+    }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center py-xxl w-full bg-neutral-dimmed"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        size: 40
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "py-sm-extra px-md"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "mb-xs text-neutral-primary font-semibold"
+    }, template.label), template.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted"
+    }, template.description))), /*#__PURE__*/ react.createElement("div", {
+        className: "absolute inset-0 hidden items-center justify-center bg-white/80 group-hover:flex group-focus-visible:flex"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "lg",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        tabIndex: -1,
+        "aria-hidden": true
+    }, "Insert")));
+export { TemplateCard };
+
+//# sourceMappingURL=TemplateCard.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateCard.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { SelectableTemplate } from \"./SelectableTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport type { TemplateItemProps } from \"./types.js\";\n\nexport const TemplateCard = ({ template, onSelect }: TemplateItemProps) => {\n    return (\n        <SelectableTemplate\n            template={template}\n            onSelect={onSelect}\n            className={\n                \"flex flex-col justify-between bg-neutral-base overflow-hidden rounded-lg w-[173px] relative shadow-sm\"\n            }\n        >\n            <div>\n                <div className={\"flex items-center justify-center py-xxl w-full bg-neutral-dimmed\"}>\n                    <TemplateIcon icon={template.icon} size={40} />\n                </div>\n                <div className={\"py-sm-extra px-md\"}>\n                    <Text size={\"md\"} className={\"mb-xs text-neutral-primary font-semibold\"}>\n                        {template.label}\n                    </Text>\n                    {template.description && (\n                        <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted\"}>\n                            {template.description}\n                        </Text>\n                    )}\n                </div>\n            </div>\n\n            <div\n                className={\n                    \"absolute inset-0 hidden items-center justify-center bg-white/80 group-hover:flex group-focus-visible:flex\"\n                }\n            >\n                <Button\n                    size={\"lg\"}\n                    variant={\"primary\"}\n                    icon={<PlusIcon />}\n                    tabIndex={-1}\n                    aria-hidden={true}\n                >\n                    Insert\n                </Button>\n            </div>\n        </SelectableTemplate>\n    );\n};\n"],"names":["TemplateCard","template","onSelect","SelectableTemplate","TemplateIcon","Text","Button","PlusIcon"],"mappings":";;;;;AAQO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAqB,GAC3D,WAAP,GACI,oBAACC,oBAAkBA;QACf,UAAUF;QACV,UAAUC;QACV,WACI;qBAGJ,oBAAC,2BACG,oBAAC;QAAI,WAAW;qBACZ,oBAACE,cAAYA;QAAC,MAAMH,SAAS,IAAI;QAAE,MAAM;uBAE7C,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAAS,KAAK,GAElBA,SAAS,WAAW,IAAI,WAAJ,GACjB,oBAACI,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCJ,SAAS,WAAW,mBAMrC,oBAAC;QACG,WACI;qBAGJ,oBAACK,QAAMA;QACH,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,gBAAQA;QACf,UAAU;QACV,eAAa;OAChB"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+interface TemplateGalleryProps {
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+}
+export declare const TemplateGallery: ({ templates, onSelect }: TemplateGalleryProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js

@@ -0,0 +1,22 @@
+import react, { useState } from "react";
+import { TemplateGalleryToolbar } from "./TemplateGalleryToolbar.js";
+import { TemplateList } from "./TemplateList.js";
+const TemplateGallery = ({ templates, onSelect })=>{
+    const [viewMode, setViewMode] = useState("grid");
+    const [search, setSearch] = useState("");
+    const query = search.toLowerCase();
+    const filteredTemplates = templates.filter((template)=>template.label.toLowerCase().includes(query));
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TemplateGalleryToolbar, {
+        search: search,
+        onSearch: setSearch,
+        viewMode: viewMode,
+        onViewMode: setViewMode
+    }), /*#__PURE__*/ react.createElement(TemplateList, {
+        viewMode: viewMode,
+        templates: filteredTemplates,
+        onSelect: onSelect
+    }));
+};
+export { TemplateGallery };
+
+//# sourceMappingURL=TemplateGallery.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGallery.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateGalleryToolbar } from \"./TemplateGalleryToolbar.js\";\nimport { TemplateList } from \"./TemplateList.js\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateGalleryProps {\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nexport const TemplateGallery = ({ templates, onSelect }: TemplateGalleryProps) => {\n    const [viewMode, setViewMode] = useState<ViewMode>(\"grid\");\n    const [search, setSearch] = useState(\"\");\n\n    const query = search.toLowerCase();\n    const filteredTemplates = templates.filter(template =>\n        template.label.toLowerCase().includes(query)\n    );\n\n    return (\n        <>\n            <TemplateGalleryToolbar\n                search={search}\n                onSearch={setSearch}\n                viewMode={viewMode}\n                onViewMode={setViewMode}\n            />\n            <TemplateList viewMode={viewMode} templates={filteredTemplates} onSelect={onSelect} />\n        </>\n    );\n};\n"],"names":["TemplateGallery","templates","onSelect","viewMode","setViewMode","useState","search","setSearch","query","filteredTemplates","template","TemplateGalleryToolbar","TemplateList"],"mappings":";;;AAWO,MAAMA,kBAAkB,CAAC,EAAEC,SAAS,EAAEC,QAAQ,EAAwB;IACzE,MAAM,CAACC,UAAUC,YAAY,GAAGC,SAAmB;IACnD,MAAM,CAACC,QAAQC,UAAU,GAAGF,SAAS;IAErC,MAAMG,QAAQF,OAAO,WAAW;IAChC,MAAMG,oBAAoBR,UAAU,MAAM,CAACS,CAAAA,WACvCA,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,CAACF;IAG1C,OAAO,WAAP,GACI,wDACI,oBAACG,wBAAsBA;QACnB,QAAQL;QACR,UAAUC;QACV,UAAUJ;QACV,YAAYC;sBAEhB,oBAACQ,cAAYA;QAAC,UAAUT;QAAU,WAAWM;QAAmB,UAAUP;;AAGtF"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ViewMode } from "./types.js";
+interface TemplateGalleryToolbarProps {
+    search: string;
+    onSearch: (search: string) => void;
+    viewMode: ViewMode;
+    onViewMode: (viewMode: ViewMode) => void;
+}
+export declare const TemplateGalleryToolbar: ({ search, onSearch, viewMode, onViewMode }: TemplateGalleryToolbarProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js

@@ -0,0 +1,52 @@
+import react from "react";
+import { DelayedOnChange, Icon, Input, ToggleGroup } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { ReactComponent as grid_view_svg_ReactComponent } from "@webiny/icons/grid_view.svg";
+import { ReactComponent as list_svg_ReactComponent } from "@webiny/icons/list.svg";
+const TemplateGalleryToolbar = ({ search, onSearch, viewMode, onViewMode })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center gap-sm pb-md pt-xs"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: search,
+        onChange: onSearch
+    }, ({ value, onChange })=>/*#__PURE__*/ react.createElement(Input, {
+            autoFocus: true,
+            value: value,
+            onChange: onChange,
+            placeholder: "Search templates...",
+            startIcon: /*#__PURE__*/ react.createElement(Icon, {
+                icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                label: "Search"
+            }),
+            size: "md",
+            variant: "primary"
+        }))), /*#__PURE__*/ react.createElement("div", {
+        className: "shrink-0"
+    }, /*#__PURE__*/ react.createElement(ToggleGroup, {
+        type: "single",
+        value: viewMode,
+        onChange: (value)=>onViewMode(value),
+        items: [
+            {
+                id: "grid",
+                value: "grid",
+                icon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(grid_view_svg_ReactComponent, null),
+                    label: "Grid view"
+                })
+            },
+            {
+                id: "list",
+                value: "list",
+                icon: /*#__PURE__*/ react.createElement(Icon, {
+                    icon: /*#__PURE__*/ react.createElement(list_svg_ReactComponent, null),
+                    label: "List view"
+                })
+            }
+        ],
+        variant: "ghost"
+    })));
+export { TemplateGalleryToolbar };
+
+//# sourceMappingURL=TemplateGalleryToolbar.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateGalleryToolbar.tsx"],"sourcesContent":["import React from \"react\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\nimport { Icon } from \"@webiny/admin-ui\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { ToggleGroup } from \"@webiny/admin-ui\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { ReactComponent as GridIcon } from \"@webiny/icons/grid_view.svg\";\nimport { ReactComponent as ListIcon } from \"@webiny/icons/list.svg\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateGalleryToolbarProps {\n    search: string;\n    onSearch: (search: string) => void;\n    viewMode: ViewMode;\n    onViewMode: (viewMode: ViewMode) => void;\n}\n\nexport const TemplateGalleryToolbar = ({\n    search,\n    onSearch,\n    viewMode,\n    onViewMode\n}: TemplateGalleryToolbarProps) => {\n    return (\n        <div className={\"flex items-center gap-sm pb-md pt-xs\"}>\n            <div className={\"flex-1 min-w-0\"}>\n                <DelayedOnChange value={search} onChange={onSearch}>\n                    {({ value, onChange }) => (\n                        <Input\n                            autoFocus={true}\n                            value={value}\n                            onChange={onChange}\n                            placeholder={\"Search templates...\"}\n                            startIcon={<Icon icon={<SearchIcon />} label={\"Search\"} />}\n                            size={\"md\"}\n                            variant={\"primary\"}\n                        />\n                    )}\n                </DelayedOnChange>\n            </div>\n            <div className={\"shrink-0\"}>\n                <ToggleGroup\n                    type=\"single\"\n                    value={viewMode}\n                    onChange={value => onViewMode(value as ViewMode)}\n                    items={[\n                        {\n                            id: \"grid\",\n                            value: \"grid\",\n                            icon: <Icon icon={<GridIcon />} label={\"Grid view\"} />\n                        },\n                        {\n                            id: \"list\",\n                            value: \"list\",\n                            icon: <Icon icon={<ListIcon />} label={\"List view\"} />\n                        }\n                    ]}\n                    variant=\"ghost\"\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["TemplateGalleryToolbar","search","onSearch","viewMode","onViewMode","DelayedOnChange","value","onChange","Input","Icon","SearchIcon","ToggleGroup","GridIcon","ListIcon"],"mappings":";;;;;AAiBO,MAAMA,yBAAyB,CAAC,EACnCC,MAAM,EACNC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACgB,GACnB,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;qBACZ,oBAACC,iBAAeA;QAAC,OAAOJ;QAAQ,UAAUC;OACrC,CAAC,EAAEI,KAAK,EAAEC,QAAQ,EAAE,iBACjB,oBAACC,OAAKA;YACF,WAAW;YACX,OAAOF;YACP,UAAUC;YACV,aAAa;YACb,yBAAW,oBAACE,MAAIA;gBAAC,oBAAM,oBAACC,gBAAUA;gBAAK,OAAO;;YAC9C,MAAM;YACN,SAAS;4BAKzB,oBAAC;QAAI,WAAW;qBACZ,oBAACC,aAAWA;QACR,MAAK;QACL,OAAOR;QACP,UAAUG,CAAAA,QAASF,WAAWE;QAC9B,OAAO;YACH;gBACI,IAAI;gBACJ,OAAO;gBACP,MAAM,WAAN,GAAM,oBAACG,MAAIA;oBAAC,oBAAM,oBAACG,8BAAQA;oBAAK,OAAO;;YAC3C;YACA;gBACI,IAAI;gBACJ,OAAO;gBACP,MAAM,WAAN,GAAM,oBAACH,MAAIA;oBAAC,oBAAM,oBAACI,yBAAQA;oBAAK,OAAO;;YAC3C;SACH;QACD,SAAQ"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ITemplateIcon } from "../../../../../features/formModel/index.js";
+interface TemplateIconProps {
+    icon: ITemplateIcon | undefined;
+    size: number;
+}
+export declare const TemplateIcon: ({ icon, size }: TemplateIconProps) => React.JSX.Element | null;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js

@@ -0,0 +1,16 @@
+import react from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+const TemplateIcon = ({ icon, size })=>{
+    if (!icon) return null;
+    return /*#__PURE__*/ react.createElement(FontAwesomeIcon, {
+        className: "text-neutral-xstrong",
+        icon: icon.name.split("/"),
+        style: {
+            width: size,
+            height: size
+        }
+    });
+};
+export { TemplateIcon };
+
+//# sourceMappingURL=TemplateIcon.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateIcon.tsx"],"sourcesContent":["import React from \"react\";\nimport type { IconProp } from \"@fortawesome/fontawesome-svg-core\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport type { ITemplateIcon } from \"~/features/formModel/index.js\";\n\ninterface TemplateIconProps {\n    icon: ITemplateIcon | undefined;\n    size: number;\n}\n\nexport const TemplateIcon = ({ icon, size }: TemplateIconProps) => {\n    if (!icon) {\n        return null;\n    }\n\n    return (\n        <FontAwesomeIcon\n            className={\"text-neutral-xstrong\"}\n            icon={icon.name.split(\"/\") as IconProp}\n            style={{ width: size, height: size }}\n        />\n    );\n};\n"],"names":["TemplateIcon","icon","size","FontAwesomeIcon"],"mappings":";;AAUO,MAAMA,eAAe,CAAC,EAAEC,IAAI,EAAEC,IAAI,EAAqB;IAC1D,IAAI,CAACD,MACD,OAAO;IAGX,OAAO,WAAP,GACI,oBAACE,iBAAeA;QACZ,WAAW;QACX,MAAMF,KAAK,IAAI,CAAC,KAAK,CAAC;QACtB,OAAO;YAAE,OAAOC;YAAM,QAAQA;QAAK;;AAG/C"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+import type { ViewMode } from "./types.js";
+interface TemplateListProps {
+    viewMode: ViewMode;
+    templates: ITemplateVM[];
+    onSelect: (template: ITemplateVM) => void;
+}
+export declare const TemplateList: ({ viewMode, templates, onSelect }: TemplateListProps) => React.JSX.Element;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { TemplateCard } from "./TemplateCard.js";
+import { TemplateListItem } from "./TemplateListItem.js";
+const TemplateList = ({ viewMode, templates, onSelect })=>{
+    if ("list" === viewMode) return /*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-y-sm mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateListItem, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "gap-md flex flex-wrap p-xs mb-xs"
+    }, templates.map((template)=>/*#__PURE__*/ react.createElement(TemplateCard, {
+            key: template.id,
+            template: template,
+            onSelect: onSelect
+        })));
+};
+export { TemplateList };
+
+//# sourceMappingURL=TemplateList.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateList.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ITemplateVM } from \"~/features/formModel/index.js\";\nimport { TemplateCard } from \"./TemplateCard.js\";\nimport { TemplateListItem } from \"./TemplateListItem.js\";\nimport type { ViewMode } from \"./types.js\";\n\ninterface TemplateListProps {\n    viewMode: ViewMode;\n    templates: ITemplateVM[];\n    onSelect: (template: ITemplateVM) => void;\n}\n\nexport const TemplateList = ({ viewMode, templates, onSelect }: TemplateListProps) => {\n    if (viewMode === \"list\") {\n        return (\n            <div className={\"flex flex-col gap-y-sm mb-xs\"}>\n                {templates.map(template => (\n                    <TemplateListItem key={template.id} template={template} onSelect={onSelect} />\n                ))}\n            </div>\n        );\n    }\n\n    return (\n        <div className={\"gap-md flex flex-wrap p-xs mb-xs\"}>\n            {templates.map(template => (\n                <TemplateCard key={template.id} template={template} onSelect={onSelect} />\n            ))}\n        </div>\n    );\n};\n"],"names":["TemplateList","viewMode","templates","onSelect","template","TemplateListItem","TemplateCard"],"mappings":";;;AAYO,MAAMA,eAAe,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAqB;IAC7E,IAAIF,AAAa,WAAbA,UACA,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXC,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACC,kBAAgBA;YAAC,KAAKD,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;IAMlF,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;OACXD,UAAU,GAAG,CAACE,CAAAA,WAAAA,WAAAA,GACX,oBAACE,cAAYA;YAAC,KAAKF,SAAS,EAAE;YAAE,UAAUA;YAAU,UAAUD;;AAI9E"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { TemplateItemProps } from "./types.js";
+export declare const TemplateListItem: ({ template, onSelect }: TemplateItemProps) => React.JSX.Element;

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js

@@ -0,0 +1,35 @@
+import react from "react";
+import { Button, Text } from "@webiny/admin-ui";
+import { ReactComponent } from "@webiny/icons/add_circle_outline.svg";
+import { SelectableTemplate } from "./SelectableTemplate.js";
+import { TemplateIcon } from "./TemplateIcon.js";
+const TemplateListItem = ({ template, onSelect })=>/*#__PURE__*/ react.createElement(SelectableTemplate, {
+        template: template,
+        onSelect: onSelect,
+        className: "flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "flex items-center justify-center shrink-0 pr-md"
+    }, /*#__PURE__*/ react.createElement(TemplateIcon, {
+        icon: template.icon,
+        size: 24
+    })), /*#__PURE__*/ react.createElement("div", {
+        className: "flex-1 min-w-0"
+    }, /*#__PURE__*/ react.createElement(Text, {
+        size: "md",
+        className: "text-neutral-primary font-semibold truncate"
+    }, template.label), template.description && /*#__PURE__*/ react.createElement(Text, {
+        size: "sm",
+        as: "div",
+        className: "text-neutral-muted truncate"
+    }, template.description)), /*#__PURE__*/ react.createElement("div", {
+        className: "hidden group-hover:block group-focus-visible:block"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        size: "md",
+        variant: "primary",
+        icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+        tabIndex: -1,
+        "aria-hidden": true
+    }, "Insert")));
+export { TemplateListItem };
+
+//# sourceMappingURL=TemplateListItem.js.map

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.js","sources":["../../../../../../src/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/TemplateListItem.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button } from \"@webiny/admin-ui\";\nimport { Text } from \"@webiny/admin-ui\";\nimport { ReactComponent as PlusIcon } from \"@webiny/icons/add_circle_outline.svg\";\nimport { SelectableTemplate } from \"./SelectableTemplate.js\";\nimport { TemplateIcon } from \"./TemplateIcon.js\";\nimport type { TemplateItemProps } from \"./types.js\";\n\n// Used #f1f2f4 b/c in Figma, the color was result of multiple colors combined.\nexport const TemplateListItem = ({ template, onSelect }: TemplateItemProps) => {\n    return (\n        <SelectableTemplate\n            template={template}\n            onSelect={onSelect}\n            className={\n                \"flex items-center py-sm-extra px-md rounded-lg bg-neutral-light hover:bg-[#f1f2f4]\"\n            }\n        >\n            <div className={\"flex items-center justify-center shrink-0 pr-md\"}>\n                <TemplateIcon icon={template.icon} size={24} />\n            </div>\n            <div className={\"flex-1 min-w-0\"}>\n                <Text size={\"md\"} className={\"text-neutral-primary font-semibold truncate\"}>\n                    {template.label}\n                </Text>\n                {template.description && (\n                    <Text size={\"sm\"} as={\"div\"} className={\"text-neutral-muted truncate\"}>\n                        {template.description}\n                    </Text>\n                )}\n            </div>\n            <div className={\"hidden group-hover:block group-focus-visible:block\"}>\n                <Button\n                    size={\"md\"}\n                    variant={\"primary\"}\n                    icon={<PlusIcon />}\n                    tabIndex={-1}\n                    aria-hidden={true}\n                >\n                    Insert\n                </Button>\n            </div>\n        </SelectableTemplate>\n    );\n};\n"],"names":["TemplateListItem","template","onSelect","SelectableTemplate","TemplateIcon","Text","Button","PlusIcon"],"mappings":";;;;;AASO,MAAMA,mBAAmB,CAAC,EAAEC,QAAQ,EAAEC,QAAQ,EAAqB,GAC/D,WAAP,GACI,oBAACC,oBAAkBA;QACf,UAAUF;QACV,UAAUC;QACV,WACI;qBAGJ,oBAAC;QAAI,WAAW;qBACZ,oBAACE,cAAYA;QAAC,MAAMH,SAAS,IAAI;QAAE,MAAM;uBAE7C,oBAAC;QAAI,WAAW;qBACZ,oBAACI,MAAIA;QAAC,MAAM;QAAM,WAAW;OACxBJ,SAAS,KAAK,GAElBA,SAAS,WAAW,IAAI,WAAJ,GACjB,oBAACI,MAAIA;QAAC,MAAM;QAAM,IAAI;QAAO,WAAW;OACnCJ,SAAS,WAAW,kBAIjC,oBAAC;QAAI,WAAW;qBACZ,oBAACK,QAAMA;QACH,MAAM;QACN,SAAS;QACT,oBAAM,oBAACC,gBAAQA;QACf,UAAU;QACV,eAAa;OAChB"}

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/index.d.ts

@@ -0,0 +1 @@
+export { AddTemplateButton, type AddTemplateButtonProps } from "./AddTemplateButton.js";

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/index.js

@@ -0,0 +1 @@
+export { AddTemplateButton } from "./AddTemplateButton.js";

package/base/Base/FieldRenderers/ObjectRenderer/TemplatePicker/types.d.ts

@@ -0,0 +1,6 @@
+import type { ITemplateVM } from "../../../../../features/formModel/index.js";
+export type ViewMode = "grid" | "list";
+export interface TemplateItemProps {
+    template: ITemplateVM;
+    onSelect: (template: ITemplateVM) => void;
+}

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.d.ts

@@ -0,0 +1,5 @@
+import type { IObjectFieldItemVM } from "../../../../features/formModel/index.js";
+type ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);
+export declare function resolveItemTitle(item: IObjectFieldItemVM, index: number, label: string | undefined, itemTitle: ItemStringSetting | undefined): string;
+export declare function resolveItemDescription(item: IObjectFieldItemVM, index: number, itemDescription: ItemStringSetting | undefined): string | undefined;
+export {};

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js

@@ -0,0 +1,28 @@
+function fieldsToData(fields) {
+    const data = {};
+    for (const field of fields)data[field.name] = field.value;
+    return data;
+}
+function resolveItemTitle(item, index, label, itemTitle) {
+    const fallback = `${label || "Item"} #${index + 1}`;
+    if (!itemTitle) return fallback;
+    if ("string" == typeof itemTitle) {
+        const field = item.fields.find((f)=>f.name === itemTitle);
+        const value = field ? String(field.value ?? "") : "";
+        return value || fallback;
+    }
+    const data = fieldsToData(item.fields);
+    return itemTitle(data, index) || fallback;
+}
+function resolveItemDescription(item, index, itemDescription) {
+    if (!itemDescription) return;
+    if ("string" == typeof itemDescription) {
+        const field = item.fields.find((f)=>f.name === itemDescription);
+        return field ? String(field.value ?? "") || void 0 : void 0;
+    }
+    const data = fieldsToData(item.fields);
+    return itemDescription(data, index) || void 0;
+}
+export { resolveItemDescription, resolveItemTitle };
+
+//# sourceMappingURL=resolveItemTitle.js.map

package/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.js","sources":["../../../../../src/base/Base/FieldRenderers/ObjectRenderer/resolveItemTitle.ts"],"sourcesContent":["import type { IFieldVM, IObjectFieldItemVM } from \"~/features/formModel/index.js\";\n\ntype ItemStringSetting = string | ((data: Record<string, unknown>, index: number) => string);\n\nfunction fieldsToData(fields: IFieldVM[]): Record<string, unknown> {\n    const data: Record<string, unknown> = {};\n    for (const field of fields) {\n        data[field.name] = field.value;\n    }\n    return data;\n}\n\nexport function resolveItemTitle(\n    item: IObjectFieldItemVM,\n    index: number,\n    label: string | undefined,\n    itemTitle: ItemStringSetting | undefined\n): string {\n    const fallback = `${label || \"Item\"} #${index + 1}`;\n\n    if (!itemTitle) {\n        return fallback;\n    }\n\n    if (typeof itemTitle === \"string\") {\n        const field = item.fields.find(f => f.name === itemTitle);\n        const value = field ? String(field.value ?? \"\") : \"\";\n        return value || fallback;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemTitle(data, index) || fallback;\n}\n\nexport function resolveItemDescription(\n    item: IObjectFieldItemVM,\n    index: number,\n    itemDescription: ItemStringSetting | undefined\n): string | undefined {\n    if (!itemDescription) {\n        return undefined;\n    }\n\n    if (typeof itemDescription === \"string\") {\n        const field = item.fields.find(f => f.name === itemDescription);\n        return field ? String(field.value ?? \"\") || undefined : undefined;\n    }\n\n    const data = fieldsToData(item.fields);\n    return itemDescription(data, index) || undefined;\n}\n"],"names":["fieldsToData","fields","data","field","resolveItemTitle","item","index","label","itemTitle","fallback","f","value","String","resolveItemDescription","itemDescription","undefined"],"mappings":"AAIA,SAASA,aAAaC,MAAkB;IACpC,MAAMC,OAAgC,CAAC;IACvC,KAAK,MAAMC,SAASF,OAChBC,IAAI,CAACC,MAAM,IAAI,CAAC,GAAGA,MAAM,KAAK;IAElC,OAAOD;AACX;AAEO,SAASE,iBACZC,IAAwB,EACxBC,KAAa,EACbC,KAAyB,EACzBC,SAAwC;IAExC,MAAMC,WAAW,GAAGF,SAAS,OAAO,EAAE,EAAED,QAAQ,GAAG;IAEnD,IAAI,CAACE,WACD,OAAOC;IAGX,IAAI,AAAqB,YAArB,OAAOD,WAAwB;QAC/B,MAAML,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKF;QAC/C,MAAMG,QAAQR,QAAQS,OAAOT,MAAM,KAAK,IAAI,MAAM;QAClD,OAAOQ,SAASF;IACpB;IAEA,MAAMP,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOG,UAAUN,MAAMI,UAAUG;AACrC;AAEO,SAASI,uBACZR,IAAwB,EACxBC,KAAa,EACbQ,eAA8C;IAE9C,IAAI,CAACA,iBACD;IAGJ,IAAI,AAA2B,YAA3B,OAAOA,iBAA8B;QACrC,MAAMX,QAAQE,KAAK,MAAM,CAAC,IAAI,CAACK,CAAAA,IAAKA,EAAE,IAAI,KAAKI;QAC/C,OAAOX,QAAQS,OAAOT,MAAM,KAAK,IAAI,OAAOY,SAAYA;IAC5D;IAEA,MAAMb,OAAOF,aAAaK,KAAK,MAAM;IACrC,OAAOS,gBAAgBZ,MAAMI,UAAUS;AAC3C"}

package/base/Base/FieldRenderers/PassthroughRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        passthrough: {
+            fieldType: string;
+            settings: undefined;
+        };
+    }
+}
+export declare const PassthroughRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PassthroughRenderer.js

@@ -0,0 +1,12 @@
+import react from "react";
+import { createObjectFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { LayoutNodeRenderer } from "../../../features/formModel/FormView.js";
+const PassthroughRenderer = createObjectFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement("div", {
+        className: "flex flex-col gap-4"
+    }, field.layout.map((node, index)=>/*#__PURE__*/ react.createElement(LayoutNodeRenderer, {
+            key: index,
+            node: node
+        }))));
+export { PassthroughRenderer };
+
+//# sourceMappingURL=PassthroughRenderer.js.map

package/base/Base/FieldRenderers/PassthroughRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PassthroughRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PassthroughRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createObjectFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { LayoutNodeRenderer } from \"~/features/formModel/FormView.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passthrough: { fieldType: string; settings: undefined };\n    }\n}\n\nexport const PassthroughRenderer = createObjectFieldRenderer(({ field }) => {\n    return (\n        <div className=\"flex flex-col gap-4\">\n            {field.layout.map((node, index) => (\n                <LayoutNodeRenderer key={index} node={node} />\n            ))}\n        </div>\n    );\n});\n"],"names":["PassthroughRenderer","createObjectFieldRenderer","field","node","index","LayoutNodeRenderer"],"mappings":";;;AAUO,MAAMA,sBAAsBC,0BAA0B,CAAC,EAAEC,KAAK,EAAE,GAC5D,WAAP,GACI,oBAAC;QAAI,WAAU;OACVA,MAAM,MAAM,CAAC,GAAG,CAAC,CAACC,MAAMC,QAAAA,WAAAA,GACrB,oBAACC,oBAAkBA;YAAC,KAAKD;YAAO,MAAMD"}

package/base/Base/FieldRenderers/PasswordInputRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        passwordInput: {
+            fieldType: "password";
+            settings: undefined;
+        };
+    }
+}
+export declare const PasswordInputRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PasswordInputRenderer.js

@@ -0,0 +1,22 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { DelayedOnChange, Input } from "@webiny/admin-ui";
+const PasswordInputRenderer = createFieldRenderer(({ field })=>/*#__PURE__*/ react.createElement(DelayedOnChange, {
+        value: field.value,
+        onChange: (value)=>field.onChange(value)
+    }, /*#__PURE__*/ react.createElement(Input, {
+        label: field.label,
+        hint: field.help,
+        placeholder: field.placeholder,
+        type: "password",
+        autoComplete: "new-password",
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        onBlur: ()=>field.onBlur()
+    })));
+export { PasswordInputRenderer };
+
+//# sourceMappingURL=PasswordInputRenderer.js.map

package/base/Base/FieldRenderers/PasswordInputRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PasswordInputRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PasswordInputRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Input } from \"@webiny/admin-ui\";\nimport { DelayedOnChange } from \"@webiny/admin-ui\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        passwordInput: { fieldType: \"password\"; settings: undefined };\n    }\n}\n\nexport const PasswordInputRenderer = createFieldRenderer(({ field }) => {\n    return (\n        <DelayedOnChange value={field.value} onChange={value => field.onChange(value)}>\n            <Input\n                label={field.label}\n                hint={field.help}\n                placeholder={field.placeholder}\n                type=\"password\"\n                autoComplete=\"new-password\"\n                description={field.description}\n                note={field.note}\n                required={field.required}\n                disabled={field.disabled}\n                validation={field.validation}\n                onBlur={() => field.onBlur()}\n            />\n        </DelayedOnChange>\n    );\n});\n"],"names":["PasswordInputRenderer","createFieldRenderer","field","DelayedOnChange","value","Input"],"mappings":";;;AAWO,MAAMA,wBAAwBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE,GACxD,WAAP,GACI,oBAACC,iBAAeA;QAAC,OAAOD,MAAM,KAAK;QAAE,UAAUE,CAAAA,QAASF,MAAM,QAAQ,CAACE;qBACnE,oBAACC,OAAKA;QACF,OAAOH,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAK;QACL,cAAa;QACb,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,QAAQ,IAAMA,MAAM,MAAM"}

package/base/Base/FieldRenderers/PermissionsRenderer.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        permissions: {
+            fieldType: "permissions";
+            settings: {
+                id?: string;
+            };
+        };
+    }
+}
+export declare const PermissionsRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/PermissionsRenderer.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Permissions } from "../../../components/Permissions/Permissions.js";
+const PermissionsRenderer = createFieldRenderer(({ field })=>{
+    const id = field.rendererSettings?.id || "new";
+    return /*#__PURE__*/ react.createElement(Permissions, {
+        id: id,
+        value: field.value,
+        onChange: (value)=>field.onChange(value),
+        validate: ()=>Promise.resolve(true),
+        validation: {
+            isValid: null
+        }
+    });
+});
+export { PermissionsRenderer };
+
+//# sourceMappingURL=PermissionsRenderer.js.map

package/base/Base/FieldRenderers/PermissionsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/PermissionsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/PermissionsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { Permissions } from \"~/components/Permissions/Permissions.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        permissions: { fieldType: \"permissions\"; settings: { id?: string } };\n    }\n}\n\nexport const PermissionsRenderer = createFieldRenderer(({ field }) => {\n    const id = (field.rendererSettings?.id as string) || \"new\";\n\n    return (\n        <Permissions\n            id={id}\n            value={field.value as any[]}\n            onChange={value => field.onChange(value)}\n            validate={() => Promise.resolve(true)}\n            validation={{ isValid: null }}\n        />\n    );\n});\n"],"names":["PermissionsRenderer","createFieldRenderer","field","id","Permissions","value","Promise"],"mappings":";;;AAUO,MAAMA,sBAAsBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC7D,MAAMC,KAAMD,MAAM,gBAAgB,EAAE,MAAiB;IAErD,OAAO,WAAP,GACI,oBAACE,aAAWA;QACR,IAAID;QACJ,OAAOD,MAAM,KAAK;QAClB,UAAUG,CAAAA,QAASH,MAAM,QAAQ,CAACG;QAClC,UAAU,IAAMC,QAAQ,OAAO,CAAC;QAChC,YAAY;YAAE,SAAS;QAAK;;AAGxC"}

package/base/Base/FieldRenderers/RadioButtonsRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        radioButtons: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const RadioButtonsRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/RadioButtonsRenderer.js

@@ -0,0 +1,28 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { RadioGroup } from "@webiny/admin-ui";
+const isValidValue = (value)=>"string" == typeof value || "number" == typeof value;
+const RadioButtonsRenderer = createFieldRenderer(({ field })=>{
+    const options = field.options ?? [];
+    return /*#__PURE__*/ react.createElement(RadioGroup, {
+        label: field.label,
+        hint: field.help,
+        description: field.description,
+        note: field.note,
+        required: field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        items: options.map((opt)=>({
+                label: opt.label,
+                value: isValidValue(opt.value) ? String(opt.value) : opt.value
+            })),
+        value: isValidValue(field.value) ? String(field.value) : void 0,
+        onChange: (value)=>{
+            field.onChange(value);
+            field.onBlur();
+        }
+    });
+});
+export { RadioButtonsRenderer };
+
+//# sourceMappingURL=RadioButtonsRenderer.js.map

package/base/Base/FieldRenderers/RadioButtonsRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/RadioButtonsRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/RadioButtonsRenderer.tsx"],"sourcesContent":["import React from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RadioGroup } from \"@webiny/admin-ui\";\nimport type { IValueOption } from \"~/features/formModel/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        radioButtons: { fieldType: \"text\" | \"number\"; options: true; settings: undefined };\n    }\n}\n\nconst isValidValue = (value: unknown): value is string | number =>\n    typeof value === \"string\" || typeof value === \"number\";\n\nexport const RadioButtonsRenderer = createFieldRenderer(({ field }) => {\n    const options: IValueOption[] = field.options ?? [];\n\n    return (\n        <RadioGroup\n            label={field.label}\n            hint={field.help}\n            description={field.description}\n            note={field.note}\n            required={field.required}\n            disabled={field.disabled}\n            validation={field.validation}\n            items={options.map(opt => ({\n                label: opt.label,\n                value: isValidValue(opt.value) ? String(opt.value) : opt.value\n            }))}\n            value={isValidValue(field.value) ? String(field.value) : undefined}\n            onChange={value => {\n                field.onChange(value);\n                field.onBlur();\n            }}\n        />\n    );\n});\n"],"names":["isValidValue","value","RadioButtonsRenderer","createFieldRenderer","field","options","RadioGroup","opt","String","undefined"],"mappings":";;;AAWA,MAAMA,eAAe,CAACC,QAClB,AAAiB,YAAjB,OAAOA,SAAsB,AAAiB,YAAjB,OAAOA;AAEjC,MAAMC,uBAAuBC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAC9D,MAAMC,UAA0BD,MAAM,OAAO,IAAI,EAAE;IAEnD,OAAO,WAAP,GACI,oBAACE,YAAUA;QACP,OAAOF,MAAM,KAAK;QAClB,MAAMA,MAAM,IAAI;QAChB,aAAaA,MAAM,WAAW;QAC9B,MAAMA,MAAM,IAAI;QAChB,UAAUA,MAAM,QAAQ;QACxB,UAAUA,MAAM,QAAQ;QACxB,YAAYA,MAAM,UAAU;QAC5B,OAAOC,QAAQ,GAAG,CAACE,CAAAA,MAAQ;gBACvB,OAAOA,IAAI,KAAK;gBAChB,OAAOP,aAAaO,IAAI,KAAK,IAAIC,OAAOD,IAAI,KAAK,IAAIA,IAAI,KAAK;YAClE;QACA,OAAOP,aAAaI,MAAM,KAAK,IAAII,OAAOJ,MAAM,KAAK,IAAIK;QACzD,UAAUR,CAAAA;YACNG,MAAM,QAAQ,CAACH;YACfG,MAAM,MAAM;QAChB;;AAGZ"}

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        rolesMultiSelect: {
+            fieldType: "rolesMultiSelect";
+            settings: undefined;
+        };
+    }
+}
+export declare const RolesMultiSelectRenderer: React.ComponentType<{
+    field: import("../../..").IFieldVM;
+}>;

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.js

@@ -0,0 +1,21 @@
+import react, { useMemo } from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { RolesMultiAutocomplete } from "../../../components/RolesMultiAutocomplete/index.js";
+const RolesMultiSelectRenderer = createFieldRenderer(({ field })=>{
+    const rawValue = field.value;
+    const values = useMemo(()=>{
+        if (!rawValue) return [];
+        return rawValue.map((item)=>"string" == typeof item ? item : item.id);
+    }, [
+        rawValue
+    ]);
+    return /*#__PURE__*/ react.createElement(RolesMultiAutocomplete, {
+        label: field.label,
+        values: values,
+        onChange: (ids)=>field.onChange(ids),
+        disabled: field.disabled
+    });
+});
+export { RolesMultiSelectRenderer };
+
+//# sourceMappingURL=RolesMultiSelectRenderer.js.map

package/base/Base/FieldRenderers/RolesMultiSelectRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base/Base/FieldRenderers/RolesMultiSelectRenderer.js","sources":["../../../../src/base/Base/FieldRenderers/RolesMultiSelectRenderer.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { createFieldRenderer } from \"~/features/formModel/createFieldRenderer.js\";\nimport { RolesMultiAutocomplete } from \"~/components/RolesMultiAutocomplete/index.js\";\n\ndeclare module \"../../../features/formModel/abstractions.js\" {\n    interface IFieldRendererRegistry {\n        rolesMultiSelect: { fieldType: \"rolesMultiSelect\"; settings: undefined };\n    }\n}\n\nexport const RolesMultiSelectRenderer = createFieldRenderer(({ field }) => {\n    const rawValue = field.value as Array<string | { id: string }> | null;\n\n    const values = useMemo(() => {\n        if (!rawValue) {\n            return [];\n        }\n        return rawValue.map(item => (typeof item === \"string\" ? item : item.id));\n    }, [rawValue]);\n\n    return (\n        <RolesMultiAutocomplete\n            label={field.label}\n            values={values}\n            onChange={ids => field.onChange(ids)}\n            disabled={field.disabled}\n        />\n    );\n});\n"],"names":["RolesMultiSelectRenderer","createFieldRenderer","field","rawValue","values","useMemo","item","RolesMultiAutocomplete","ids"],"mappings":";;;AAUO,MAAMA,2BAA2BC,oBAAoB,CAAC,EAAEC,KAAK,EAAE;IAClE,MAAMC,WAAWD,MAAM,KAAK;IAE5B,MAAME,SAASC,QAAQ;QACnB,IAAI,CAACF,UACD,OAAO,EAAE;QAEb,OAAOA,SAAS,GAAG,CAACG,CAAAA,OAAS,AAAgB,YAAhB,OAAOA,OAAoBA,OAAOA,KAAK,EAAE;IAC1E,GAAG;QAACH;KAAS;IAEb,OAAO,WAAP,GACI,oBAACI,wBAAsBA;QACnB,OAAOL,MAAM,KAAK;QAClB,QAAQE;QACR,UAAUI,CAAAA,MAAON,MAAM,QAAQ,CAACM;QAChC,UAAUN,MAAM,QAAQ;;AAGpC"}

package/base/Base/FieldRenderers/SelectRenderer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+declare module "../../../features/formModel/abstractions.js" {
+    interface IFieldRendererRegistry {
+        select: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+        /** @deprecated Use "select" instead. */
+        dropdown: {
+            fieldType: "text" | "number";
+            options: true;
+            settings: undefined;
+        };
+    }
+}
+export declare const SelectRenderer: React.ComponentType<{
+    field: import("~/features/formModel/index.js").IFieldVM;
+}>;

package/base/Base/FieldRenderers/SelectRenderer.js

@@ -0,0 +1,31 @@
+import react from "react";
+import { createFieldRenderer } from "../../../features/formModel/createFieldRenderer.js";
+import { Select } from "@webiny/admin-ui";
+const isValidValue = (value)=>"string" == typeof value || "number" == typeof value;
+const SelectRenderer = createFieldRenderer(({ field })=>{
+    const options = field.options ?? [];
+    return /*#__PURE__*/ react.createElement(Select, {
+        label: field.label,
+        hint: field.help,
+        placeholder: field.placeholder,
+        description: field.description,
+        note: field.note,
+        value: isValidValue(field.value) ? String(field.value) : "",
+        onChange: (value)=>{
+            field.onChange(value);
+            field.onBlur();
+        },
+        required: field.required,
+        displayResetAction: !field.required,
+        disabled: field.disabled,
+        validation: field.validation,
+        options: options.map((opt)=>({
+                label: opt.label,
+                value: isValidValue(opt.value) ? String(opt.value) : opt.value,
+                disabled: opt.disabled
+            }))
+    });
+});
+export { SelectRenderer };
+
+//# sourceMappingURL=SelectRenderer.js.map