{"version":3,"file":"tabs.mjs","names":[],"sources":["../../../../src/web-components/catalog/basic/tabs.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { TabsApi } from \"@a2ui/web_core/v0_9/basic_catalog\";\nimport { createLitComponent } from \"../../adapter\";\nimport { LEAF_MARGIN } from \"./utils\";\n\nexport const Tabs = createLitComponent(\n  TabsApi,\n  ({ props, buildChild, state, requestUpdate }) => {\n    const local = state as { selectedIndex: number };\n    const tabs = props.tabs || [];\n    const activeTab = tabs[local.selectedIndex] ?? tabs[0];\n    return html`\n      <div\n        style=${styleMap({\n          display: \"flex\",\n          flexDirection: \"column\",\n          width: \"100%\",\n          margin: LEAF_MARGIN,\n        })}\n      >\n        <div\n          style=${styleMap({\n            display: \"flex\",\n            borderBottom: \"1px solid #ccc\",\n            marginBottom: \"8px\",\n          })}\n        >\n          ${tabs.map(\n            (tab: any, i: number) => html`\n              <button\n                type=\"button\"\n                @click=${() => {\n                  local.selectedIndex = i;\n                  requestUpdate();\n                }}\n                style=${styleMap({\n                  padding: \"8px 16px\",\n                  border: \"none\",\n                  background: \"none\",\n                  borderBottom:\n                    local.selectedIndex === i\n                      ? \"2px solid var(--a2ui-primary-color, #007bff)\"\n                      : \"none\",\n                  fontWeight: local.selectedIndex === i ? \"bold\" : \"normal\",\n                  cursor: \"pointer\",\n                  color:\n                    local.selectedIndex === i\n                      ? \"var(--a2ui-primary-color, #007bff)\"\n                      : \"inherit\",\n                })}\n              >\n                ${tab.title}\n              </button>\n            `,\n          )}\n        </div>\n        <div style=\"flex: 1;\">\n          ${activeTab ? buildChild(activeTab.child) : nothing}\n        </div>\n      </div>\n    `;\n  },\n  () => ({ selectedIndex: 0 }),\n);\n"],"mappings":";;;;;;;AAMA,MAAa,OAAO,mBAClB,UACC,EAAE,OAAO,YAAY,OAAO,oBAAoB;CAC/C,MAAM,QAAQ;CACd,MAAM,OAAO,MAAM,QAAQ,EAAE;CAC7B,MAAM,YAAY,KAAK,MAAM,kBAAkB,KAAK;AACpD,QAAO,IAAI;;gBAEC,SAAS;EACf,SAAS;EACT,eAAe;EACf,OAAO;EACP,QAAQ;EACT,CAAC,CAAC;;;kBAGO,SAAS;EACf,SAAS;EACT,cAAc;EACd,cAAc;EACf,CAAC,CAAC;;YAED,KAAK,KACJ,KAAU,MAAc,IAAI;;;+BAGV;AACb,QAAM,gBAAgB;AACtB,iBAAe;GACf;wBACM,SAAS;EACf,SAAS;EACT,QAAQ;EACR,YAAY;EACZ,cACE,MAAM,kBAAkB,IACpB,iDACA;EACN,YAAY,MAAM,kBAAkB,IAAI,SAAS;EACjD,QAAQ;EACR,OACE,MAAM,kBAAkB,IACpB,uCACA;EACP,CAAC,CAAC;;kBAED,IAAI,MAAM;;cAGjB,CAAC;;;YAGA,YAAY,WAAW,UAAU,MAAM,GAAG,QAAQ;;;;UAKrD,EAAE,eAAe,GAAG,EAC5B"}