{"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"}