UNPKG

@copilotkit/a2ui-renderer

Version:

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

1 lines 3.28 kB
{"version":3,"file":"text-field.cjs","names":["z","CommonSchemas","createLitComponent"],"sources":["../../../../src/web-components/catalog/minimal/text-field.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { CommonSchemas } from \"@a2ui/web_core/v0_9\";\nimport { z } from \"zod\";\nimport { createLitComponent } from \"../../adapter\";\n\nexport const TextFieldSchema = z.object({\n label: CommonSchemas.DynamicString,\n value: CommonSchemas.DynamicString,\n variant: z.enum([\"longText\", \"number\", \"shortText\", \"obscured\"]).optional(),\n validationRegexp: z.string().optional(),\n});\n\nexport const TextFieldApiDef = {\n name: \"TextField\",\n schema: TextFieldSchema,\n};\n\nexport const TextField = createLitComponent(\n TextFieldApiDef,\n ({ props, context }) => {\n const isLong = props.variant === \"longText\";\n const type =\n props.variant === \"number\"\n ? \"number\"\n : props.variant === \"obscured\"\n ? \"password\"\n : \"text\";\n const id = `textfield-${context.componentModel.id}`;\n const style = {\n padding: \"8px\",\n width: \"100%\",\n border: \"1px solid #ccc\",\n borderRadius: \"4px\",\n boxSizing: \"border-box\",\n };\n const onChange = (event: Event) => {\n props.setValue?.(\n (event.target as HTMLInputElement | HTMLTextAreaElement).value,\n );\n };\n\n return html`\n <div\n style=${styleMap({\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n width: \"100%\",\n })}\n >\n ${\n props.label\n ? html`<label\n for=${id}\n style=${styleMap({ fontSize: \"14px\", fontWeight: \"bold\" })}\n >${props.label}</label\n >`\n : null\n }\n ${\n isLong\n ? html`<textarea\n id=${id}\n style=${styleMap(style)}\n .value=${props.value || \"\"}\n @input=${onChange}\n ></textarea>`\n : html`<input\n id=${id}\n type=${type}\n style=${styleMap(style)}\n .value=${props.value || \"\"}\n @input=${onChange}\n />`\n }\n </div>\n `;\n },\n);\n"],"mappings":";;;;;;;AAMA,MAAa,kBAAkBA,MAAE,OAAO;CACtC,OAAOC,kCAAc;CACrB,OAAOA,kCAAc;CACrB,SAASD,MAAE,KAAK;EAAC;EAAY;EAAU;EAAa;EAAW,CAAC,CAAC,UAAU;CAC3E,kBAAkBA,MAAE,QAAQ,CAAC,UAAU;CACxC,CAAC;AAEF,MAAa,kBAAkB;CAC7B,MAAM;CACN,QAAQ;CACT;AAED,MAAa,YAAYE,mCACvB,kBACC,EAAE,OAAO,cAAc;CACtB,MAAM,SAAS,MAAM,YAAY;CACjC,MAAM,OACJ,MAAM,YAAY,WACd,WACA,MAAM,YAAY,aAChB,aACA;CACR,MAAM,KAAK,aAAa,QAAQ,eAAe;CAC/C,MAAM,QAAQ;EACZ,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACD,MAAM,YAAY,UAAiB;AACjC,QAAM,WACH,MAAM,OAAkD,MAC1D;;AAGH,QAAO,QAAI;;0DAEU;EACf,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACR,CAAC,CAAC;;UAGD,MAAM,QACF,QAAI;oBACE,GAAG;gEACQ;EAAE,UAAU;EAAQ,YAAY;EAAQ,CAAC,CAAC;iBACxD,MAAM,MAAM;iBAEf,KACL;UAEC,SACI,QAAI;mBACC,GAAG;gEACS,MAAM,CAAC;uBACf,MAAM,SAAS,GAAG;uBAClB,SAAS;4BAElB,QAAI;mBACC,GAAG;qBACD,KAAK;gEACK,MAAM,CAAC;uBACf,MAAM,SAAS,GAAG;uBAClB,SAAS;gBAEvB;;;EAIR"}