UNPKG

@copilotkit/a2ui-renderer

Version:

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

1 lines 1.91 kB
{"version":3,"file":"slider.mjs","names":[],"sources":["../../../../src/web-components/catalog/basic/slider.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { SliderApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { createLitComponent } from \"../../adapter\";\nimport { uniqueId } from \"./ids\";\nimport { LEAF_MARGIN } from \"./utils\";\n\nexport const Slider = createLitComponent(SliderApi, ({ props }) => {\n const inputId = uniqueId(\"slider\");\n return html`\n <div\n style=${styleMap({\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"4px\",\n margin: LEAF_MARGIN,\n width: \"100%\",\n })}\n >\n <div style=\"display: flex; justify-content: space-between;\">\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 <span style=\"font-size: 12px; color: #666;\">${props.value}</span>\n </div>\n <input\n id=${inputId}\n type=\"range\"\n min=${props.min ?? 0}\n max=${props.max}\n .value=${String(props.value ?? 0)}\n @input=${(e: Event) =>\n props.setValue(Number((e.target as HTMLInputElement).value))}\n style=\"width: 100%; cursor: pointer;\"\n />\n </div>\n `;\n});\n"],"mappings":";;;;;;;;AAOA,MAAa,SAAS,mBAAmB,YAAY,EAAE,YAAY;CACjE,MAAM,UAAU,SAAS,SAAS;AAClC,QAAO,IAAI;;cAEC,SAAS;EACf,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,OAAO;EACR,CAAC,CAAC;;;UAIC,MAAM,QACF,IAAI;oBACE,QAAQ;;iBAEX,MAAM,MAAM;iBAEf,QACL;sDAC6C,MAAM,MAAM;;;aAGrD,QAAQ;;cAEP,MAAM,OAAO,EAAE;cACf,MAAM,IAAI;iBACP,OAAO,MAAM,SAAS,EAAE,CAAC;kBACxB,MACR,MAAM,SAAS,OAAQ,EAAE,OAA4B,MAAM,CAAC,CAAC;;;;;EAKrE"}