{"version":3,"file":"TabItem.svelte_svelte_type_style_lang.86cbea9a.js","sources":["../../../../ui/packages/tabs/src/Tabs.svelte"],"sourcesContent":["<script context=\"module\">\n\texport const TABS = {};\n</script>\n\n<script lang=\"ts\">\n\timport { setContext, createEventDispatcher, tick } from \"svelte\";\n\timport { writable } from \"svelte/store\";\n\n\tinterface Tab {\n\t\tname: string;\n\t\tid: object;\n\t}\n\n\texport let visible: boolean = true;\n\texport let elem_id: string = \"id\";\n\texport let selected: number | string | object;\n\n\tlet tabs: Array<Tab> = [];\n\n\tconst selected_tab = writable<false | object | number | string>(false);\n\tconst dispatch = createEventDispatcher<{ change: undefined }>();\n\n\tsetContext(TABS, {\n\t\tregister_tab: (tab: Tab) => {\n\t\t\ttabs.push({ name: tab.name, id: tab.id });\n\t\t\tselected_tab.update((current) => current ?? tab.id);\n\t\t\ttabs = tabs;\n\t\t},\n\t\tunregister_tab: (tab: Tab) => {\n\t\t\tconst i = tabs.findIndex((t) => t.id === tab.id);\n\t\t\ttabs.splice(i, 1);\n\t\t\tselected_tab.update((current) =>\n\t\t\t\tcurrent === tab.id ? tabs[i]?.id || tabs[tabs.length - 1]?.id : current\n\t\t\t);\n\t\t},\n\n\t\tselected_tab\n\t});\n\n\tfunction change_tab(id: object | string | number) {\n\t\tselected = id;\n\t\t$selected_tab = id;\n\t\tdispatch(\"change\");\n\t}\n\n\t$: selected !== null && change_tab(selected);\n</script>\n\n<div class=\"tabs\" class:hide={!visible} id={elem_id}>\n\t<div class=\"tab-nav scroll-hide\">\n\t\t{#each tabs as t, i (t.id)}\n\t\t\t{#if t.id === $selected_tab}\n\t\t\t\t<button class=\"selected\">\n\t\t\t\t\t{t.name}\n\t\t\t\t</button>\n\t\t\t{:else}\n\t\t\t\t<button on:click={() => change_tab(t.id)}>\n\t\t\t\t\t{t.name}\n\t\t\t\t</button>\n\t\t\t{/if}\n\t\t{/each}\n\t</div>\n\t<slot />\n</div>\n\n<style>\n\t.tabs {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tflex-direction: column;\n\t\tmargin-top: var(--size-4);\n\t\tmargin-bottom: var(--size-4);\n\t}\n\n\t.hide {\n\t\tdisplay: none;\n\t}\n\n\t.tab-nav {\n\t\tdisplay: flex;\n\t\tposition: relative;\n\t\tflex-wrap: wrap;\n\t\tborder-bottom: 2px solid var(--color-border-primary);\n\t\twhite-space: nowrap;\n\t}\n\n\tbutton {\n\t\tmargin-bottom: -2px;\n\t\tborder: 2px solid transparent;\n\t\tborder-color: transparent;\n\t\tborder-bottom: none;\n\t\tborder-top-right-radius: var(--radius-md);\n\t\tborder-top-left-radius: var(--radius-md);\n\t\tpadding: var(--size-1) var(--size-4);\n\t\tcolor: var(--color-text-subdued);\n\t}\n\n\tbutton:hover {\n\t\tcolor: var(--color-text-body);\n\t}\n\t.selected {\n\t\tborder-color: var(--color-border-primary);\n\t\tbackground-color: var(--color-background-primary);\n\t\tcolor: var(--color-text-body);\n\t}\n\n\t.bar {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: -2px;\n\t\tleft: 0;\n\t\tz-index: 999;\n\t\tbackground-color: var(--color-background-primary);\n\t\twidth: 100%;\n\t\theight: 2px;\n\t\tcontent: \"\";\n\t}\n</style>\n"],"names":[],"mappings":"sTAyDM,MAAE,2HADJ,0EACE,MAAE,gEAJF,MAAE,gGADJ,2CACE,MAAE,+EAFA,OAAE,KAAO,uRADR,gBAAc,MAAE,mBAArB,iRAFwC,kBAAb,cAA/B,SACC,gGACQ,6HAFmC,uBAAb,mHA/CjB,0DAYF,UAAmB,OACnB,UAAkB,SAClB,cAEP,UAEE,GAAe,EAA2C,EAAK,0BAC/D,GAAW,IAEjB,EAAW,GACV,aAAe,IACd,EAAK,MAAO,KAAM,EAAI,KAAM,GAAI,EAAI,KACpC,EAAa,OAAQ,GAAY,GAAW,EAAI,EAAE,UAGnD,eAAiB,SACV,GAAI,EAAK,UAAW,GAAM,EAAE,KAAO,EAAI,EAAE,EAC/C,EAAK,OAAO,EAAG,CAAC,EAChB,EAAa,OAAQ,GACpB,IAAY,EAAI,GAAK,EAAK,IAAI,IAAM,EAAK,EAAK,OAAS,IAAI,GAAK,CAAO,GAIzE,4BAGmB,OACnB,EAAW,CAAE,MACb,EAAgB,KAChB,EAAS,QAAQ,aAcS,EAAW,EAAE,EAAE,wLAXvC,IAAa,MAAQ,EAAW,CAAQ"}