{"version":3,"file":"text-field.cjs","names":["createLitComponent","TextFieldApi","uniqueId","STANDARD_BORDER","STANDARD_RADIUS","LEAF_MARGIN","nothing"],"sources":["../../../../src/web-components/catalog/basic/text-field.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { TextFieldApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { createLitComponent } from \"../../adapter\";\nimport { uniqueId } from \"./ids\";\nimport { LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS } from \"./utils\";\n\nexport const TextField = createLitComponent(TextFieldApi, ({ props }) => {\n  const inputId = uniqueId(\"textfield\");\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 hasError = props.validationErrors && props.validationErrors.length > 0;\n  const style = {\n    padding: \"8px\",\n    width: \"100%\",\n    border: hasError ? \"1px solid red\" : STANDARD_BORDER,\n    borderRadius: STANDARD_RADIUS,\n    boxSizing: \"border-box\",\n  };\n  const onChange = (e: Event) => {\n    props.setValue((e.target as HTMLInputElement | HTMLTextAreaElement).value);\n  };\n\n  return html`\n    <div\n      style=${styleMap({\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: \"4px\",\n        width: \"100%\",\n        margin: LEAF_MARGIN,\n      })}\n    >\n      ${\n        props.label\n          ? html`<label\n            for=${inputId}\n            style=\"font-size: 14px; font-weight: bold;\"\n            >${props.label}</label\n          >`\n          : nothing\n      }\n      ${\n        isLong\n          ? html`<textarea\n            id=${inputId}\n            style=${styleMap(style)}\n            .value=${props.value || \"\"}\n            @input=${onChange}\n          ></textarea>`\n          : html`<input\n            id=${inputId}\n            type=${type}\n            style=${styleMap(style)}\n            .value=${props.value || \"\"}\n            @input=${onChange}\n          />`\n      }\n      ${\n        hasError\n          ? html`<span style=\"font-size: 12px; color: red;\"\n            >${props.validationErrors![0]}</span\n          >`\n          : nothing\n      }\n    </div>\n  `;\n});\n"],"mappings":";;;;;;;;AAOA,MAAa,YAAYA,mCAAmBC,iDAAe,EAAE,YAAY;CACvE,MAAM,UAAUC,qBAAS,YAAY;CACrC,MAAM,SAAS,MAAM,YAAY;CACjC,MAAM,OACJ,MAAM,YAAY,WACd,WACA,MAAM,YAAY,aAChB,aACA;CACR,MAAM,WAAW,MAAM,oBAAoB,MAAM,iBAAiB,SAAS;CAC3E,MAAM,QAAQ;EACZ,SAAS;EACT,OAAO;EACP,QAAQ,WAAW,kBAAkBC;EACrC,cAAcC;EACd,WAAW;EACZ;CACD,MAAM,YAAY,MAAa;AAC7B,QAAM,SAAU,EAAE,OAAkD,MAAM;;AAG5E,QAAO,QAAI;;wDAEU;EACf,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,QAAQC;EACT,CAAC,CAAC;;QAGD,MAAM,QACF,QAAI;kBACE,QAAQ;;eAEX,MAAM,MAAM;eAEfC,YACL;QAEC,SACI,QAAI;iBACC,QAAQ;8DACI,MAAM,CAAC;qBACf,MAAM,SAAS,GAAG;qBAClB,SAAS;0BAElB,QAAI;iBACC,QAAQ;mBACN,KAAK;8DACK,MAAM,CAAC;qBACf,MAAM,SAAS,GAAG;qBAClB,SAAS;cAEvB;QAEC,WACI,QAAI;eACD,MAAM,iBAAkB,GAAG;eAE9BA,YACL;;;EAGL"}