@copilotkit/a2ui-renderer/dist/web-components/catalog/basic/choice-picker.mjs.map

A2UI Renderer for CopilotKit - render A2UI surfaces in React applications

{"version":3,"file":"choice-picker.mjs","names":[],"sources":["../../../../src/web-components/catalog/basic/choice-picker.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { ChoicePickerApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { createLitComponent } from \"../../adapter\";\nimport { LEAF_MARGIN, STANDARD_BORDER, STANDARD_RADIUS } from \"./utils\";\n\nexport const ChoicePicker = createLitComponent(\n  ChoicePickerApi,\n  ({ props, context, state, requestUpdate }) => {\n    const local = state as { filter: string };\n    const values = Array.isArray(props.value) ? props.value : [];\n    const isMutuallyExclusive = props.variant === \"mutuallyExclusive\";\n    const onToggle = (val: string) => {\n      if (isMutuallyExclusive) {\n        props.setValue([val]);\n      } else {\n        props.setValue(\n          values.includes(val)\n            ? values.filter((v: string) => v !== val)\n            : [...values, val],\n        );\n      }\n    };\n    const options = (props.options || []).filter(\n      (opt: any) =>\n        !props.filterable ||\n        local.filter === \"\" ||\n        String(opt.label).toLowerCase().includes(local.filter.toLowerCase()),\n    );\n\n    return html`\n      <div\n        style=${styleMap({\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: \"8px\",\n          margin: LEAF_MARGIN,\n          width: \"100%\",\n        })}\n      >\n        ${\n          props.label\n            ? html`<strong style=\"font-size: 14px;\">${props.label}</strong>`\n            : nothing\n        }\n        ${\n          props.filterable\n            ? html`<input\n              type=\"text\"\n              placeholder=\"Filter options...\"\n              .value=${local.filter}\n              @input=${(e: Event) => {\n                local.filter = (e.target as HTMLInputElement).value;\n                requestUpdate();\n              }}\n              style=${styleMap({\n                padding: \"4px 8px\",\n                border: STANDARD_BORDER,\n                borderRadius: STANDARD_RADIUS,\n              })}\n            />`\n            : nothing\n        }\n        <div\n          style=${styleMap({\n            display: \"flex\",\n            flexDirection: props.displayStyle === \"chips\" ? \"row\" : \"column\",\n            flexWrap: props.displayStyle === \"chips\" ? \"wrap\" : \"nowrap\",\n            gap: \"8px\",\n          })}\n        >\n          ${options.map((opt: any) => {\n            const isSelected = values.includes(opt.value);\n            if (props.displayStyle === \"chips\") {\n              return html`\n                <button\n                  type=\"button\"\n                  @click=${() => onToggle(opt.value)}\n                  style=${styleMap({\n                    padding: \"4px 12px\",\n                    borderRadius: \"16px\",\n                    border: isSelected\n                      ? \"1px solid var(--a2ui-primary-color, #007bff)\"\n                      : STANDARD_BORDER,\n                    backgroundColor: isSelected\n                      ? \"var(--a2ui-primary-color, #007bff)\"\n                      : \"#fff\",\n                    color: isSelected ? \"#fff\" : \"inherit\",\n                    cursor: \"pointer\",\n                    fontSize: \"12px\",\n                  })}\n                >\n                  ${opt.label}\n                </button>\n              `;\n            }\n            return html`\n              <label\n                style=\"display: flex; align-items: center; gap: 8px; cursor: pointer;\"\n              >\n                <input\n                  type=${isMutuallyExclusive ? \"radio\" : \"checkbox\"}\n                  .checked=${isSelected}\n                  name=${\n                    isMutuallyExclusive\n                      ? `choice-${context.componentModel.id}`\n                      : \"\"\n                  }\n                  @change=${() => onToggle(opt.value)}\n                />\n                <span style=\"font-size: 14px;\">${opt.label}</span>\n              </label>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  },\n  () => ({ filter: \"\" }),\n);\n"],"mappings":";;;;;;;AAMA,MAAa,eAAe,mBAC1B,kBACC,EAAE,OAAO,SAAS,OAAO,oBAAoB;CAC5C,MAAM,QAAQ;CACd,MAAM,SAAS,MAAM,QAAQ,MAAM,MAAM,GAAG,MAAM,QAAQ,EAAE;CAC5D,MAAM,sBAAsB,MAAM,YAAY;CAC9C,MAAM,YAAY,QAAgB;AAChC,MAAI,oBACF,OAAM,SAAS,CAAC,IAAI,CAAC;MAErB,OAAM,SACJ,OAAO,SAAS,IAAI,GAChB,OAAO,QAAQ,MAAc,MAAM,IAAI,GACvC,CAAC,GAAG,QAAQ,IAAI,CACrB;;CAGL,MAAM,WAAW,MAAM,WAAW,EAAE,EAAE,QACnC,QACC,CAAC,MAAM,cACP,MAAM,WAAW,MACjB,OAAO,IAAI,MAAM,CAAC,aAAa,CAAC,SAAS,MAAM,OAAO,aAAa,CAAC,CACvE;AAED,QAAO,IAAI;;gBAEC,SAAS;EACf,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,OAAO;EACR,CAAC,CAAC;;UAGD,MAAM,QACF,IAAI,oCAAoC,MAAM,MAAM,aACpD,QACL;UAEC,MAAM,aACF,IAAI;;;uBAGK,MAAM,OAAO;wBACZ,MAAa;AACrB,QAAM,SAAU,EAAE,OAA4B;AAC9C,iBAAe;GACf;sBACM,SAAS;EACf,SAAS;EACT,QAAQ;EACR,cAAc;EACf,CAAC,CAAC;kBAEH,QACL;;kBAES,SAAS;EACf,SAAS;EACT,eAAe,MAAM,iBAAiB,UAAU,QAAQ;EACxD,UAAU,MAAM,iBAAiB,UAAU,SAAS;EACpD,KAAK;EACN,CAAC,CAAC;;YAED,QAAQ,KAAK,QAAa;EAC1B,MAAM,aAAa,OAAO,SAAS,IAAI,MAAM;AAC7C,MAAI,MAAM,iBAAiB,QACzB,QAAO,IAAI;;;iCAGQ,SAAS,IAAI,MAAM,CAAC;0BAC3B,SAAS;GACf,SAAS;GACT,cAAc;GACd,QAAQ,aACJ,iDACA;GACJ,iBAAiB,aACb,uCACA;GACJ,OAAO,aAAa,SAAS;GAC7B,QAAQ;GACR,UAAU;GACX,CAAC,CAAC;;oBAED,IAAI,MAAM;;;AAIlB,SAAO,IAAI;;;;;yBAKE,sBAAsB,UAAU,WAAW;6BACvC,WAAW;yBAEpB,sBACI,UAAU,QAAQ,eAAe,OACjC,GACL;kCACe,SAAS,IAAI,MAAM,CAAC;;iDAEL,IAAI,MAAM;;;GAG/C,CAAC;;;;UAKJ,EAAE,QAAQ,IAAI,EACtB"}