@mozaic-ds/web-components 0.16.1-beta.0 → 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/package.json +1 -1
  2. package/public/DataTableUtilities-f652653f.js +2 -0
  3. package/public/DataTableUtilities-f652653f.js.map +1 -0
  4. package/public/adeo/DataTableUtilities-f652653f.js +2 -0
  5. package/public/adeo/DataTableUtilities-f652653f.js.map +1 -0
  6. package/public/adeo/bundle.js +5 -0
  7. package/public/adeo/components/button/ButtonSlot.js +2 -0
  8. package/public/adeo/components/button/ButtonSlot.js.map +1 -0
  9. package/public/adeo/components/buttonslot/ButtonSlot.svelte +148 -0
  10. package/public/adeo/components/datatable/DataTable.js +1 -1
  11. package/public/adeo/components/datatable/datatable-default-action.nested.js +1 -1
  12. package/public/adeo/components/datatable/datatable-default-edtion.nested.js +1 -1
  13. package/public/adeo/components/datatable/datatable-default-filter-tags.nested.js +1 -1
  14. package/public/adeo/components/datatable/datatable-default-footer.nested.js +1 -1
  15. package/public/adeo/components/header/Header.js +1 -1
  16. package/public/adeo/components/header/Header.js.map +1 -1
  17. package/public/adeo/components/header/Header.svelte +2 -0
  18. package/public/adeo/components/progressbar/ProgressBar.js +1 -1
  19. package/public/adeo/components/progressbar/ProgressBar.js.map +1 -1
  20. package/public/adeo/components/progressbar/ProgressBar.svelte +7 -11
  21. package/public/adeo/components/tabs/Tabs.js +1 -1
  22. package/public/adeo/components/tabs/Tabs.js.map +1 -1
  23. package/public/adeo/components/tabs/Tabs.nested.js +1 -1
  24. package/public/adeo/components/tabs/Tabs.nested.js.map +1 -1
  25. package/public/adeo/components/tabs/Tabs.nested.svelte +64 -28
  26. package/public/adeo/components/tabs/Tabs.svelte +28 -0
  27. package/public/adeo/components/tabs/tabs.types.d.ts +2 -0
  28. package/public/adeo/components/tabs/tabs.types.d.ts.map +1 -1
  29. package/public/adeo/icons-storybook.js +8 -0
  30. package/public/adeo/main.d.ts +1 -0
  31. package/public/adeo/main.d.ts.map +1 -1
  32. package/public/adeo/utilities/DataTableUtilities.d.ts.map +1 -1
  33. package/public/adeo/utilities/DataTableUtilities.ts +3 -1
  34. package/public/adeo/utilities/components/tabs/tabs.types.d.ts +2 -0
  35. package/public/adeo/utilities/components/tabs/tabs.types.d.ts.map +1 -1
  36. package/public/adeo/utilities/main.d.ts +1 -0
  37. package/public/adeo/utilities/main.d.ts.map +1 -1
  38. package/public/adeo/utilities/stories/accordion/Accordion.stories.d.ts.map +1 -1
  39. package/public/adeo/utilities/stories/button/ButtonSlot.stories.d.ts +10 -0
  40. package/public/adeo/utilities/stories/button/ButtonSlot.stories.d.ts.map +1 -0
  41. package/public/adeo/utilities/stories/tabs/Tabs.stories.d.ts.map +1 -1
  42. package/public/adeo/utilities/utilities/DataTableUtilities.d.ts.map +1 -1
  43. package/public/bricoman/DataTableUtilities-f652653f.js +2 -0
  44. package/public/bricoman/DataTableUtilities-f652653f.js.map +1 -0
  45. package/public/bricoman/bundle.js +5 -0
  46. package/public/bricoman/components/button/ButtonSlot.js +2 -0
  47. package/public/bricoman/components/button/ButtonSlot.js.map +1 -0
  48. package/public/bricoman/components/buttonslot/ButtonSlot.svelte +148 -0
  49. package/public/bricoman/components/datatable/DataTable.js +1 -1
  50. package/public/bricoman/components/datatable/datatable-default-action.nested.js +1 -1
  51. package/public/bricoman/components/datatable/datatable-default-edtion.nested.js +1 -1
  52. package/public/bricoman/components/datatable/datatable-default-filter-tags.nested.js +1 -1
  53. package/public/bricoman/components/datatable/datatable-default-footer.nested.js +1 -1
  54. package/public/bricoman/components/header/Header.js +1 -1
  55. package/public/bricoman/components/header/Header.js.map +1 -1
  56. package/public/bricoman/components/header/Header.svelte +2 -0
  57. package/public/bricoman/components/progressbar/ProgressBar.js +1 -1
  58. package/public/bricoman/components/progressbar/ProgressBar.js.map +1 -1
  59. package/public/bricoman/components/progressbar/ProgressBar.svelte +7 -11
  60. package/public/bricoman/components/tabs/Tabs.js +1 -1
  61. package/public/bricoman/components/tabs/Tabs.js.map +1 -1
  62. package/public/bricoman/components/tabs/Tabs.nested.js +1 -1
  63. package/public/bricoman/components/tabs/Tabs.nested.js.map +1 -1
  64. package/public/bricoman/components/tabs/Tabs.nested.svelte +64 -28
  65. package/public/bricoman/components/tabs/Tabs.svelte +28 -0
  66. package/public/bricoman/components/tabs/tabs.types.d.ts +2 -0
  67. package/public/bricoman/components/tabs/tabs.types.d.ts.map +1 -1
  68. package/public/bricoman/icons-storybook.js +8 -0
  69. package/public/bricoman/main.d.ts +1 -0
  70. package/public/bricoman/main.d.ts.map +1 -1
  71. package/public/bricoman/utilities/DataTableUtilities.d.ts.map +1 -1
  72. package/public/bricoman/utilities/DataTableUtilities.ts +3 -1
  73. package/public/bricoman/utilities/components/tabs/tabs.types.d.ts +2 -0
  74. package/public/bricoman/utilities/components/tabs/tabs.types.d.ts.map +1 -1
  75. package/public/bricoman/utilities/main.d.ts +1 -0
  76. package/public/bricoman/utilities/main.d.ts.map +1 -1
  77. package/public/bricoman/utilities/stories/accordion/Accordion.stories.d.ts.map +1 -1
  78. package/public/bricoman/utilities/stories/button/ButtonSlot.stories.d.ts +10 -0
  79. package/public/bricoman/utilities/stories/button/ButtonSlot.stories.d.ts.map +1 -0
  80. package/public/bricoman/utilities/stories/tabs/Tabs.stories.d.ts.map +1 -1
  81. package/public/bricoman/utilities/utilities/DataTableUtilities.d.ts.map +1 -1
  82. package/public/bundle.js +5 -0
  83. package/public/components/button/ButtonSlot.js +2 -0
  84. package/public/components/button/ButtonSlot.js.map +1 -0
  85. package/public/components/buttonslot/ButtonSlot.svelte +148 -0
  86. package/public/components/datatable/DataTable.js +1 -1
  87. package/public/components/datatable/datatable-default-action.nested.js +1 -1
  88. package/public/components/datatable/datatable-default-edtion.nested.js +1 -1
  89. package/public/components/datatable/datatable-default-filter-tags.nested.js +1 -1
  90. package/public/components/datatable/datatable-default-footer.nested.js +1 -1
  91. package/public/components/header/Header.js +1 -1
  92. package/public/components/header/Header.js.map +1 -1
  93. package/public/components/header/Header.svelte +2 -0
  94. package/public/components/progressbar/ProgressBar.js +1 -1
  95. package/public/components/progressbar/ProgressBar.js.map +1 -1
  96. package/public/components/progressbar/ProgressBar.svelte +7 -11
  97. package/public/components/tabs/Tabs.js +1 -1
  98. package/public/components/tabs/Tabs.js.map +1 -1
  99. package/public/components/tabs/Tabs.nested.js +1 -1
  100. package/public/components/tabs/Tabs.nested.js.map +1 -1
  101. package/public/components/tabs/Tabs.nested.svelte +64 -28
  102. package/public/components/tabs/Tabs.svelte +28 -0
  103. package/public/components/tabs/tabs.types.d.ts +2 -0
  104. package/public/components/tabs/tabs.types.d.ts.map +1 -1
  105. package/public/icons-storybook.js +8 -0
  106. package/public/main.d.ts +1 -0
  107. package/public/main.d.ts.map +1 -1
  108. package/public/utilities/DataTableUtilities.d.ts.map +1 -1
  109. package/public/utilities/DataTableUtilities.ts +3 -1
  110. package/public/utilities/components/tabs/tabs.types.d.ts +2 -0
  111. package/public/utilities/components/tabs/tabs.types.d.ts.map +1 -1
  112. package/public/utilities/main.d.ts +1 -0
  113. package/public/utilities/main.d.ts.map +1 -1
  114. package/public/utilities/stories/accordion/Accordion.stories.d.ts.map +1 -1
  115. package/public/utilities/stories/button/ButtonSlot.stories.d.ts +10 -0
  116. package/public/utilities/stories/button/ButtonSlot.stories.d.ts.map +1 -0
  117. package/public/utilities/stories/tabs/Tabs.stories.d.ts.map +1 -1
  118. package/public/utilities/utilities/DataTableUtilities.d.ts.map +1 -1
  119. package/public/DataTableUtilities-190a23f3.js +0 -2
  120. package/public/DataTableUtilities-190a23f3.js.map +0 -1
  121. package/public/adeo/DataTableUtilities-190a23f3.js +0 -2
  122. package/public/adeo/DataTableUtilities-190a23f3.js.map +0 -1
  123. package/public/bricoman/DataTableUtilities-190a23f3.js +0 -2
  124. package/public/bricoman/DataTableUtilities-190a23f3.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n export let nopaddingbreadcrumb: boolean;\n export let hasicons: boolean;\n export let hasselector: boolean;\n export let hideoptions = false;\n\n const headerAnimationThreshold = 5;\n\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let originalScrollPos = 0;\n let hasAnimation: boolean;\n let root: HTMLElement;\n\n $: parsedBreadcrumb =\n typeof breadcrumb === 'string'\n ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n : breadcrumb;\n\n $: parsedTabs =\n typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n $: parsedA11yLabels =\n typeof a11ylabels === 'string'\n ? (JSON.parse(a11ylabels) as A11yLabels)\n : a11ylabels;\n\n $: hasBack = back && back !== 'false';\n $: hasNoShadow = noshadow && noshadow !== 'false';\n $: {\n hasAnimation = Boolean(scrollcontainer);\n updateAnimation(scrollcontainer);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function goBack() {\n eventHandler.dispatch('on-back-click', {});\n }\n\n function updateAnimation(element: HTMLElement) {\n if (element) {\n element.removeEventListener('scroll', handleScroll);\n element.addEventListener('scroll', handleScroll);\n }\n }\n\n function handleScroll() {\n const currentScrollPos = scrollcontainer.scrollTop;\n const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n if (originalScrollPos > currentScrollPos) {\n // scroll up\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n root.style.marginTop = `${Math.max(\n -currentScrollPos,\n originHeaderMargin,\n )}px`;\n } else {\n // scroll while below header zone\n root.style.marginTop = '0';\n }\n } else {\n // scroll down\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n\n root.style.transition = 'none';\n root.style.marginTop = `${-currentScrollPos}px`;\n } else {\n // scroll while below header zone\n root.style.transition = 'margin-top ease-out 0.4s';\n root.style.marginTop = `${\n -root.offsetHeight - headerAnimationThreshold\n }px`;\n }\n }\n\n originalScrollPos = currentScrollPos;\n }\n</script>\n\n<div\n class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n class:mc-header--no-shadow={hasNoShadow}\n class:mc-header--animate={hasAnimation}\n bind:this={root}\n {...attributes}\n>\n <div class=\"mc-header__left\">\n {#if breadcrumb}\n <div class=\"mc-header__breadcrumb\">\n <Breadcrumb\n items={JSON.stringify(parsedBreadcrumb)}\n nopadding={nopaddingbreadcrumb}\n on:link-clicked={(event) =>\n eventHandler.dispatch('link-clicked', event.detail)}\n />\n </div>\n {/if}\n\n {#if hasBack}\n <button class=\"mc-header__back\" on:click={goBack}>\n <span class=\"mc-header__back__label\">\n {parsedA11yLabels?.['back'] || 'Back'}\n </span>\n </button>\n {/if}\n\n <div class=\"mc-header__heading\">\n <h1 class=\"mc-header__heading__title\">\n {title}\n </h1>\n {#if subtitle}\n <div class=\"mc-header__heading__subtitle\">\n {subtitle}\n </div>\n {/if}\n {#if status}\n <div class=\"mc-header__heading__status\">\n <Badge label={status} type={statustype} />\n </div>\n {/if}\n </div>\n </div>\n {#if !hideoptions}\n <div class=\"mc-header__right\">\n {#if $$slots?.icons || hasicons}\n <div class=\"mc-header__icons\">\n <slot name=\"icons\" />\n </div>\n {/if}\n {#if $$slots?.selector || hasselector}\n <div\n class:mc-header__selector--show-separator={($$slots?.icons ||\n hasicons) &&\n ($$slots?.selector || hasselector)}\n class=\"mc-header__selector\"\n >\n <slot name=\"selector\" />\n </div>\n {/if}\n </div>\n {/if}\n {#if parsedTabs && parsedTabs.length > 0}\n <div class=\"mc-header__tabs\">\n <Tabs\n tabs={JSON.stringify(parsedTabs)}\n nodivider={true}\n on:tab-clicked={(event) =>\n eventHandler.dispatch('tab-clicked', event.detail)}\n />\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.header';\n\n :host {\n display: block;\n line-height: 0;\n }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","if_block5","length","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","get_current_component","createEventDispatcher","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../../../src/components/header/Header.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import { EventHandler } from '../../utilities/EventHandler';\n import Breadcrumb from '../breadcrumb/Breadcrumb.nested.svelte';\n import type { BreadcrumbItems } from '../breadcrumb/breadcrumb.types';\n import Tabs from '../tabs/Tabs.nested.svelte';\n import type { TabsItems } from '../tabs/tabs.types';\n import Badge from '../badge/Badge.nested.svelte';\n import type { BadgeType } from '../badge/badge.types';\n import type { A11yLabels, HeaderSize } from './Header.types';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let title: string;\n export let subtitle: string;\n export let size: HeaderSize = 'm';\n export let status: string;\n export let statustype: BadgeType;\n export let back: boolean | string;\n export let breadcrumb: string | BreadcrumbItems[];\n export let tabs: string | TabsItems[];\n export let noshadow: boolean | string;\n export let a11ylabels: string | A11yLabels;\n export let scrollcontainer: HTMLElement;\n export let nopaddingbreadcrumb: boolean;\n export let hasicons: boolean;\n export let hasselector: boolean;\n export let hideoptions = false;\n\n const headerAnimationThreshold = 5;\n\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let originalScrollPos = 0;\n let hasAnimation: boolean;\n let root: HTMLElement;\n\n $: parsedBreadcrumb =\n typeof breadcrumb === 'string'\n ? (JSON.parse(breadcrumb) as BreadcrumbItems[])\n : breadcrumb;\n\n $: parsedTabs =\n typeof tabs === 'string' ? (JSON.parse(tabs) as TabsItems[]) : tabs;\n\n $: parsedA11yLabels =\n typeof a11ylabels === 'string'\n ? (JSON.parse(a11ylabels) as A11yLabels)\n : a11ylabels;\n\n $: hasBack = back && back !== 'false';\n $: hasNoShadow = noshadow && noshadow !== 'false';\n $: {\n hasAnimation = Boolean(scrollcontainer);\n updateAnimation(scrollcontainer);\n }\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function goBack() {\n eventHandler.dispatch('on-back-click', {});\n }\n\n function updateAnimation(element: HTMLElement) {\n if (element) {\n element.removeEventListener('scroll', handleScroll);\n element.addEventListener('scroll', handleScroll);\n }\n }\n\n function handleScroll() {\n const currentScrollPos = scrollcontainer.scrollTop;\n const originHeaderMargin = Number(root.style.marginTop.replace('px', ''));\n\n if (originalScrollPos > currentScrollPos) {\n // scroll up\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n root.style.marginTop = `${Math.max(\n -currentScrollPos,\n originHeaderMargin,\n )}px`;\n } else {\n // scroll while below header zone\n root.style.marginTop = '0';\n }\n } else {\n // scroll down\n if (currentScrollPos < root.offsetHeight) {\n // scroll while in header zone\n\n root.style.transition = 'none';\n root.style.marginTop = `${-currentScrollPos}px`;\n } else {\n // scroll while below header zone\n root.style.transition = 'margin-top ease-out 0.4s';\n root.style.marginTop = `${\n -root.offsetHeight - headerAnimationThreshold\n }px`;\n }\n }\n\n originalScrollPos = currentScrollPos;\n }\n</script>\n\n<div\n class=\"mc-header {size ? `mc-header--${size}` : ''}\"\n class:mc-header--no-shadow={hasNoShadow}\n class:mc-header--animate={hasAnimation}\n bind:this={root}\n {...attributes}\n>\n <div class=\"mc-header__left\">\n {#if breadcrumb}\n <div class=\"mc-header__breadcrumb\">\n <Breadcrumb\n items={JSON.stringify(parsedBreadcrumb)}\n nopadding={nopaddingbreadcrumb}\n on:link-clicked={(event) =>\n eventHandler.dispatch('link-clicked', event.detail)}\n />\n </div>\n {/if}\n\n {#if hasBack}\n <button class=\"mc-header__back\" on:click={goBack}>\n <span class=\"mc-header__back__label\">\n {parsedA11yLabels?.['back'] || 'Back'}\n </span>\n </button>\n {/if}\n\n <div class=\"mc-header__heading\">\n <h1 class=\"mc-header__heading__title\">\n {title}\n </h1>\n {#if subtitle}\n <div class=\"mc-header__heading__subtitle\">\n {subtitle}\n </div>\n {/if}\n {#if status}\n <div class=\"mc-header__heading__status\">\n <Badge label={status} type={statustype} />\n </div>\n {/if}\n </div>\n </div>\n {#if !hideoptions}\n <div class=\"mc-header__right\">\n {#if $$slots?.icons || hasicons}\n <div class=\"mc-header__icons\">\n <slot name=\"icons\" />\n </div>\n {/if}\n {#if $$slots?.selector || hasselector}\n <div\n class:mc-header__selector--show-separator={($$slots?.icons ||\n hasicons) &&\n ($$slots?.selector || hasselector)}\n class=\"mc-header__selector\"\n >\n <slot name=\"selector\" />\n </div>\n {/if}\n </div>\n {/if}\n {#if parsedTabs && parsedTabs.length > 0}\n <div class=\"mc-header__tabs\">\n <Tabs\n tabs={JSON.stringify(parsedTabs)}\n stateless={false}\n selectedtab={undefined}\n nodivider={true}\n on:tab-clicked={(event) =>\n eventHandler.dispatch('tab-clicked', event.detail)}\n />\n </div>\n {/if}\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import './_c.header';\n\n :host {\n display: block;\n line-height: 0;\n }\n</style>\n"],"names":["JSON","stringify","ctx","insert","target","div","anchor","button","append","span","set_data","t","t_value","icons","create_if_block_3","selector","create_if_block_2","undefined","create_if_block_7","create_if_block_6","create_if_block_5","create_if_block_4","create_if_block_1","if_block5","length","create_if_block","div2","div1","div0","h1","class","div2_class_value","hasAnimation","root","title","$$props","subtitle","size","status","statustype","back","breadcrumb","tabs","noshadow","a11ylabels","scrollcontainer","nopaddingbreadcrumb","hasicons","hasselector","hideoptions","eventHandler","EventHandler","get_current_component","createEventDispatcher","originalScrollPos","handleScroll","currentScrollPos","scrollTop","originHeaderMargin","Number","style","marginTop","replace","offsetHeight","Math","max","$$invalidate","transition","parsedBreadcrumb","parse","parsedTabs","parsedA11yLabels","hasBack","hasNoShadow","Boolean","element","removeEventListener","addEventListener","updateAnimation","attributes","Object","assign","$$restProps","dispatch","event","detail","$$value"],"mappings":"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"}
@@ -174,6 +174,8 @@
174
174
  <div class="mc-header__tabs">
175
175
  <Tabs
176
176
  tabs={JSON.stringify(parsedTabs)}
177
+ stateless={false}
178
+ selectedtab={undefined}
177
179
  nodivider={true}
178
180
  on:tab-clicked={(event) =>
179
181
  eventHandler.dispatch('tab-clicked', event.detail)}
@@ -1,2 +1,2 @@
1
- import{S as e,i as r,a as s,b as a,f as t,s as i,c as n,e as o,n as c,g as p,J as l,h as d,j as m,m as b,o as g,p as u,u as h,t as x,k as v}from"../../index-9ffad6d0.js";function f(e){let r,s,t,i=(e[0]??0)+"";return{c(){r=o("div"),s=x(i),t=x("%"),p(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),m(r,s),m(r,t)},p(e,r){1&r&&i!==(i=(e[0]??0)+"")&&v(s,i)},d(e){e&&g(r)}}}function $(e){let r,s,t,i=e[3]&&f(e),u=[{class:t=e[4](e[3])+" "+e[5].class},e[6]],h={};for(let e=0;e<u.length;e+=1)h=n(h,u[e]);return{c(){r=o("div"),s=o("div"),i&&i.c(),this.c=c,p(s,"class","mc-progressbar__indicator"),p(s,"role","progressbar"),p(s,"aria-valuenow",e[0]),p(s,"aria-valuemin",e[1]),p(s,"aria-valuemax",e[2]),l(s,"width",e[0]+"%"),d(r,h)},m(e,t){a(e,r,t),m(r,s),i&&i.m(s,null)},p(e,[a]){e[3]?i?i.p(e,a):(i=f(e),i.c(),i.m(s,null)):i&&(i.d(1),i=null),1&a&&p(s,"aria-valuenow",e[0]),2&a&&p(s,"aria-valuemin",e[1]),4&a&&p(s,"aria-valuemax",e[2]),1&a&&l(s,"width",e[0]+"%"),d(r,h=b(u,[40&a&&t!==(t=e[4](e[3])+" "+e[5].class)&&{class:t},64&a&&e[6]]))},i:c,o:c,d(e){e&&g(r),i&&i.d()}}}function w(e,r,s){const a=["value","valuemin","valuemax","displaypercentage","size","branded"];let t=u(r,a),{value:i}=r,{valuemin:o=0}=r,{valuemax:c=100}=r,{displaypercentage:p}=r,{size:l="m"}=r,{branded:d}=r;return e.$$set=e=>{s(5,r=n(n({},r),h(e))),s(6,t=u(r,a)),"value"in e&&s(0,i=e.value),"valuemin"in e&&s(1,o=e.valuemin),"valuemax"in e&&s(2,c=e.valuemax),"displaypercentage"in e&&s(3,p=e.displaypercentage),"size"in e&&s(7,l=e.size),"branded"in e&&s(8,d=e.branded)},r=h(r),[i,o,c,p,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),i>=51&&r.push("mc-progressbar--half"),"s"===l?r.push("mc-progressbar--s"):"xs"===l&&r.push("mc-progressbar--xs"),d&&r.push("mc-progressbar--branded"),r.join(" ")},r,t,l,d]}class y extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-progressbar{font-family:"Roboto", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cdd4d8;display:-webkit-box;display:-ms-flexbox;display:flex;height:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.mc-progressbar,.mc-progressbar *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-progressbar,.mc-progressbar__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#007f8c;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;min-width:2.3125rem;padding:0.125rem;position:absolute;-webkit-transition:width 0.4s ease;-o-transition:width 0.4s ease;transition:width 0.4s ease;top:0}.mc-progressbar--static .mc-progressbar__indicator{-webkit-transition:none;-o-transition:none;transition:none}.mc-progressbar__percentage{font-size:0.75rem;line-height:1.3333333333;font-weight:700;background-color:#ffffff;border-radius:1rem;color:#191919;padding:0.125rem 0.5rem}.mc-progressbar:not(.mc-progressbar--percent) .mc-progressbar__percentage{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-progressbar--xs{height:0.125rem}.mc-progressbar--xs,.mc-progressbar--xs .mc-progressbar__indicator{border-radius:1px}.mc-progressbar--s{height:0.25rem}.mc-progressbar--s,.mc-progressbar--s .mc-progressbar__indicator{border-radius:2px}.mc-progressbar--percent{height:1.5rem}.mc-progressbar--percent,.mc-progressbar--percent .mc-progressbar__indicator{border-radius:12px}',this.shadowRoot.appendChild(n),r(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},w,$,i,{value:0,valuemin:1,valuemax:2,displaypercentage:3,size:7,branded:8},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),t()))}static get observedAttributes(){return["value","valuemin","valuemax","displaypercentage","size","branded"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get valuemin(){return this.$$.ctx[1]}set valuemin(e){this.$$set({valuemin:e}),t()}get valuemax(){return this.$$.ctx[2]}set valuemax(e){this.$$set({valuemax:e}),t()}get displaypercentage(){return this.$$.ctx[3]}set displaypercentage(e){this.$$set({displaypercentage:e}),t()}get size(){return this.$$.ctx[7]}set size(e){this.$$set({size:e}),t()}get branded(){return this.$$.ctx[8]}set branded(e){this.$$set({branded:e}),t()}}export{y as default};
1
+ import{S as e,i as r,a as s,b as a,f as t,s as i,c as n,e as o,n as c,g as l,J as p,h as m,j as d,m as g,o as u,p as b,u as x,t as h,k as v}from"../../index-9ffad6d0.js";function f(e){let r,s,t,i=(e[0]??0)+"";return{c(){r=o("div"),s=h(i),t=h("%"),l(r,"class","mc-progressbar__percentage")},m(e,i){a(e,r,i),d(r,s),d(r,t)},p(e,r){1&r&&i!==(i=(e[0]??0)+"")&&v(s,i)},d(e){e&&u(r)}}}function $(e){let r,s,t,i=e[3]&&f(e),b=[{class:t=e[5](e[3])+" "+e[6].class},e[7]],x={};for(let e=0;e<b.length;e+=1)x=n(x,b[e]);return{c(){r=o("div"),s=o("div"),i&&i.c(),this.c=c,l(s,"class","mc-progressbar__indicator"),l(s,"role","progressbar"),l(s,"aria-valuenow",e[0]),l(s,"aria-valuemin",e[1]),l(s,"aria-valuemax",e[2]),p(s,"width",e[4]+"%"),m(r,x)},m(e,t){a(e,r,t),d(r,s),i&&i.m(s,null)},p(e,[a]){e[3]?i?i.p(e,a):(i=f(e),i.c(),i.m(s,null)):i&&(i.d(1),i=null),1&a&&l(s,"aria-valuenow",e[0]),2&a&&l(s,"aria-valuemin",e[1]),4&a&&l(s,"aria-valuemax",e[2]),16&a&&p(s,"width",e[4]+"%"),m(r,x=g(b,[72&a&&t!==(t=e[5](e[3])+" "+e[6].class)&&{class:t},128&a&&e[7]]))},i:c,o:c,d(e){e&&u(r),i&&i.d()}}}function w(e,r,s){let a;const t=["value","valuemin","valuemax","displaypercentage","size"];let i=b(r,t),{value:o}=r,{valuemin:c=0}=r,{valuemax:l=100}=r,{displaypercentage:p}=r,{size:m="m"}=r;return e.$$set=e=>{s(6,r=n(n({},r),x(e))),s(7,i=b(r,t)),"value"in e&&s(0,o=e.value),"valuemin"in e&&s(1,c=e.valuemin),"valuemax"in e&&s(2,l=e.valuemax),"displaypercentage"in e&&s(3,p=e.displaypercentage),"size"in e&&s(8,m=e.size)},e.$$.update=()=>{5&e.$$.dirty&&s(4,a=o>=l?l:o)},r=x(r),[o,c,l,p,a,function(e){const r=["mc-progressbar"];return e&&r.push("mc-progressbar--percent"),"s"===m?r.push("mc-progressbar--s"):"xs"===m&&r.push("mc-progressbar--xs"),r.join(" ")},r,i,m]}class _ extends e{constructor(e){super();const n=document.createElement("style");n.textContent='.mc-progressbar{font-family:"Roboto", sans-serif;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#cdd4d8;display:-webkit-box;display:-ms-flexbox;display:flex;height:0.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative}.mc-progressbar,.mc-progressbar *{-webkit-box-sizing:border-box;box-sizing:border-box}.mc-progressbar,.mc-progressbar__indicator{border-radius:4px;overflow:hidden}.mc-progressbar__indicator{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#007f8c;display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;left:0;min-width:2.3125rem;padding:0.125rem;position:absolute;-webkit-transition:width 0.4s ease;-o-transition:width 0.4s ease;transition:width 0.4s ease;top:0}.mc-progressbar--static .mc-progressbar__indicator{-webkit-transition:none;-o-transition:none;transition:none}.mc-progressbar__percentage{font-size:0.75rem;line-height:1.3333333333;font-weight:700;background-color:#ffffff;border-radius:1rem;color:#191919;padding:0.125rem 0.5rem}.mc-progressbar:not(.mc-progressbar--percent) .mc-progressbar__percentage{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;visibility:visible;white-space:nowrap}.mc-progressbar--xs{height:0.125rem}.mc-progressbar--xs,.mc-progressbar--xs .mc-progressbar__indicator{border-radius:1px}.mc-progressbar--s{height:0.25rem}.mc-progressbar--s,.mc-progressbar--s .mc-progressbar__indicator{border-radius:2px}.mc-progressbar--percent{height:1.5rem}.mc-progressbar--percent,.mc-progressbar--percent .mc-progressbar__indicator{border-radius:12px}.mc-progressbar__percentage{min-width:2.0625rem}',this.shadowRoot.appendChild(n),r(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},w,$,i,{value:0,valuemin:1,valuemax:2,displaypercentage:3,size:8},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),t()))}static get observedAttributes(){return["value","valuemin","valuemax","displaypercentage","size"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),t()}get valuemin(){return this.$$.ctx[1]}set valuemin(e){this.$$set({valuemin:e}),t()}get valuemax(){return this.$$.ctx[2]}set valuemax(e){this.$$set({valuemax:e}),t()}get displaypercentage(){return this.$$.ctx[3]}set displaypercentage(e){this.$$set({displaypercentage:e}),t()}get size(){return this.$$.ctx[8]}set size(e){this.$$set({size:e}),t()}}export{_ as default};
2
2
  //# sourceMappingURL=ProgressBar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/progressbar/ProgressBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { ProgressBarSize } from './progressbar.types';\n\n export let value: number;\n export let valuemin = 0;\n export let valuemax = 100;\n export let displaypercentage: boolean;\n export let size: ProgressBarSize = 'm';\n export let branded: boolean;\n\n function getClasses(displaypercentage: boolean): string {\n const classes = ['mc-progressbar'];\n\n if (displaypercentage) {\n classes.push('mc-progressbar--percent');\n }\n\n if (value >= 51) {\n classes.push('mc-progressbar--half');\n }\n\n if (size === 's') {\n classes.push('mc-progressbar--s');\n } else if (size === 'xs') {\n classes.push('mc-progressbar--xs');\n }\n\n if (branded) {\n classes.push('mc-progressbar--branded');\n }\n\n return classes.join(' ');\n }\n</script>\n\n<div class=\"{getClasses(displaypercentage)} {$$props.class}\" {...$$restProps}>\n <div\n class=\"mc-progressbar__indicator\"\n role=\"progressbar\"\n aria-valuenow={value}\n aria-valuemin={valuemin}\n aria-valuemax={valuemax}\n style=\"width: {value}%\"\n >\n {#if displaypercentage}\n <div class=\"mc-progressbar__percentage\">{value ?? 0}%</div>\n {/if}\n <!--&nbsp;-->\n </div>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.progressbar';\n</style>\n"],"names":["t0_value","ctx","insert","target","div","anchor","dirty","set_data","t0","create_if_block","class","div1_class_value","div1","append","div0","value","$$props","valuemin","valuemax","displaypercentage","size","branded","classes","push","join"],"mappings":"kMA+C+CA,GAAAC,MAAS,GAAC,oCAAC,uDAApDC,EAA0DC,EAAAC,EAAAC,yBAAjB,EAAAC,GAAAN,KAAAA,GAAAC,MAAS,GAAC,KAAAM,EAAAC,EAAAR,6CADhDC,EAAiB,IAAAQ,EAAAR,OATbS,MAAAC,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,OAAYT,EAAW,2LAIzDA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAK,GAAA,oBAPxBC,EAcKC,EAAAS,EAAAP,GAbHQ,EAYKD,EAAAE,4BAJEb,EAAiB,qFALPA,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,qBACRA,EAAK,GAAA,gBAPX,GAAAK,GAAAK,KAAAA,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,QAAK,CAAAA,MAAAC,SAAOV,EAAW,0JAhC/Dc,GAAaC,GACbC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,KAAGF,qBACdG,GAA0BH,GAC1BI,KAAAA,EAAwB,KAAGJ,WAC3BK,GAAgBL,yRAElB,SAAWG,GACZ,MAAAG,GAAW,yBAEbH,GACFG,EAAQC,KAAK,2BAGXR,GAAS,IACXO,EAAQC,KAAK,wBAGF,MAATH,EACFE,EAAQC,KAAK,qBACK,OAATH,GACTE,EAAQC,KAAK,sBAGXF,GACFC,EAAQC,KAAK,2BAGRD,EAAQE,KAAK"}
1
+ {"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/progressbar/ProgressBar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { ProgressBarSize } from './progressbar.types';\n\n export let value: number;\n export let valuemin = 0;\n export let valuemax = 100;\n export let displaypercentage: boolean;\n export let size: ProgressBarSize = 'm';\n\n $: getWidth = value >= valuemax ? valuemax : value;\n\n function getClasses(displaypercentage: boolean): string {\n const classes = ['mc-progressbar'];\n\n if (displaypercentage) {\n classes.push('mc-progressbar--percent');\n }\n\n if (size === 's') {\n classes.push('mc-progressbar--s');\n } else if (size === 'xs') {\n classes.push('mc-progressbar--xs');\n }\n\n return classes.join(' ');\n }\n</script>\n\n<div class=\"{getClasses(displaypercentage)} {$$props.class}\" {...$$restProps}>\n <div\n class=\"mc-progressbar__indicator\"\n role=\"progressbar\"\n aria-valuenow={value}\n aria-valuemin={valuemin}\n aria-valuemax={valuemax}\n style=\"width: {getWidth}%\"\n >\n {#if displaypercentage}\n <div class=\"mc-progressbar__percentage\">{value ?? 0}%</div>\n {/if}\n </div>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/_all-settings';\n @import '@mozaic-ds/styles/components/c.progressbar';\n\n .mc-progressbar__percentage {\n min-width: px-to-rem(33);\n }\n</style>\n"],"names":["t0_value","ctx","insert","target","div","anchor","dirty","set_data","t0","create_if_block","class","div1_class_value","div1","append","div0","value","$$props","valuemin","valuemax","displaypercentage","size","$$invalidate","getWidth","classes","push","join"],"mappings":"kMAwC+CA,GAAAC,MAAS,GAAC,oCAAC,uDAApDC,EAA0DC,EAAAC,EAAAC,yBAAjB,EAAAC,GAAAN,KAAAA,GAAAC,MAAS,GAAC,KAAAM,EAAAC,EAAAR,6CADhDC,EAAiB,IAAAQ,EAAAR,OATbS,MAAAC,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,OAAYT,EAAW,2LAIzDA,EAAK,wBACLA,EAAQ,wBACRA,EAAQ,gBACRA,EAAQ,GAAA,oBAP3BC,EAaKC,EAAAS,EAAAP,GAZHQ,EAWKD,EAAAE,4BAHEb,EAAiB,qFALPA,EAAK,6BACLA,EAAQ,6BACRA,EAAQ,sBACRA,EAAQ,GAAA,gBAPd,GAAAK,GAAAK,KAAAA,EAAAV,EAAW,GAAAA,EAAqB,IAAA,IAAAA,KAAQS,QAAK,CAAAA,MAAAC,UAAOV,EAAW,sJAzB/Dc,GAAaC,GACbC,SAAAA,EAAW,GAACD,GACZE,SAAAA,EAAW,KAAGF,qBACdG,GAA0BH,GAC1BI,KAAAA,EAAwB,KAAGJ,wQAErCK,EAAA,EAAEC,EAAWP,GAASG,EAAWA,EAAWH,sBAEpC,SAAWI,GACZ,MAAAI,GAAW,yBAEbJ,GACFI,EAAQC,KAAK,2BAGF,MAATJ,EACFG,EAAQC,KAAK,qBACK,OAATJ,GACTG,EAAQC,KAAK,sBAGRD,EAAQE,KAAK"}
@@ -8,7 +8,8 @@
8
8
  export let valuemax = 100;
9
9
  export let displaypercentage: boolean;
10
10
  export let size: ProgressBarSize = 'm';
11
- export let branded: boolean;
11
+
12
+ $: getWidth = value >= valuemax ? valuemax : value;
12
13
 
13
14
  function getClasses(displaypercentage: boolean): string {
14
15
  const classes = ['mc-progressbar'];
@@ -17,20 +18,12 @@
17
18
  classes.push('mc-progressbar--percent');
18
19
  }
19
20
 
20
- if (value >= 51) {
21
- classes.push('mc-progressbar--half');
22
- }
23
-
24
21
  if (size === 's') {
25
22
  classes.push('mc-progressbar--s');
26
23
  } else if (size === 'xs') {
27
24
  classes.push('mc-progressbar--xs');
28
25
  }
29
26
 
30
- if (branded) {
31
- classes.push('mc-progressbar--branded');
32
- }
33
-
34
27
  return classes.join(' ');
35
28
  }
36
29
  </script>
@@ -42,16 +35,19 @@
42
35
  aria-valuenow={value}
43
36
  aria-valuemin={valuemin}
44
37
  aria-valuemax={valuemax}
45
- style="width: {value}%"
38
+ style="width: {getWidth}%"
46
39
  >
47
40
  {#if displaypercentage}
48
41
  <div class="mc-progressbar__percentage">{value ?? 0}%</div>
49
42
  {/if}
50
- <!--&nbsp;-->
51
43
  </div>
52
44
  </div>
53
45
 
54
46
  <style lang="scss">
55
47
  @import '@mozaic-ds/styles/settings-tools/_all-settings';
56
48
  @import '@mozaic-ds/styles/components/c.progressbar';
49
+
50
+ .mc-progressbar__percentage {
51
+ min-width: px-to-rem(33);
52
+ }
57
53
  </style>
@@ -1,2 +1,2 @@
1
- import{S as e,i as t,a as s,b as a,f as i,s as n,c as l,e as c,n as o,g as d,h as r,j as b,m,o as _,O as f,p,q as u,r as h,u as x,d as g,H as v,t as k,v as w,l as $,k as y,P as A}from"../../index-9ffad6d0.js";import{E as j}from"../../EventHandler-f7ee47ca.js";function O(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function E(e){let t,s,i,n,l,o,r,m,f=e[16].text+"";function p(...t){return e[12](e[18],e[16],...t)}return{c(){t=c("button"),s=c("span"),i=k(f),d(s,"class","mc-tabs__text"),d(t,"role","tab"),d(t,"type","button"),d(t,"class","mc-tabs__element"),d(t,"id",n=e[16].id),t.disabled=l=e[16].disabled,d(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),r||(m=$(t,"click",p),r=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&y(i,f),256&a&&n!==(n=e[16].id)&&d(t,"id",n),256&a&&l!==(l=e[16].disabled)&&(t.disabled=l),256&a&&o!==(o=e[16].isActive?"true":"false")&&d(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),r=!1,m()}}}function C(e){let t;function s(e,t){return e[16].disabled?R:S}let i=s(e),n=i(e);return{c(){n.c(),t=A()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function R(e){let t,s,i,n,l,o=e[16].text+"";return{c(){t=c("span"),s=c("span"),i=k(o),d(s,"class","mc-tabs__text"),d(t,"role","tab"),d(t,"class","mc-tabs__element"),d(t,"id",n=e[16].id),d(t,"aria-selected",l=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i)},p(e,s){256&s&&o!==(o=e[16].text+"")&&y(i,o),256&s&&n!==(n=e[16].id)&&d(t,"id",n),256&s&&l!==(l=e[16].isActive?"true":"false")&&d(t,"aria-selected",l),256&s&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&s&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t)}}}function S(e){let t,s,i,n,l,o,r,m,f=e[16].text+"";function p(...t){return e[11](e[18],e[16],...t)}return{c(){t=c("a"),s=c("span"),i=k(f),d(s,"class","mc-tabs__text"),d(t,"href",n=e[16].href),d(t,"role","tab"),d(t,"class","mc-tabs__element"),d(t,"id",l=e[16].id),d(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,n){a(e,t,n),b(t,s),b(s,i),r||(m=$(t,"click",p),r=!0)},p(s,a){e=s,256&a&&f!==(f=e[16].text+"")&&y(i,f),256&a&&n!==(n=e[16].href)&&d(t,"href",n),256&a&&l!==(l=e[16].id)&&d(t,"id",l),256&a&&o!==(o=e[16].isActive?"true":"false")&&d(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),r=!1,m()}}}function q(e){let t,s;function i(e,t){return e[16].href?C:E}let n=i(e),l=n(e);return{c(){t=c("li"),l.c(),s=g(),d(t,"class","mc-tabs__item"),d(t,"role","presentation")},m(e,i){a(e,t,i),l.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&l?l.p(e,a):(l.d(1),l=n(e),l&&(l.c(),l.m(t,s)))},d(e){e&&_(t),l.d()}}}function H(e){let t,s,i,n=e[8],p=[];for(let t=0;t<n.length;t+=1)p[t]=q(O(e,n,t));let u=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<u.length;e+=1)h=l(h,u[e]);return{c(){t=c("div"),s=c("ul");for(let e=0;e<p.length;e+=1)p[e].c();this.c=o,d(s,"class","mc-tabs__nav"),d(s,"role","tablist"),d(s,"aria-label",e[1]),r(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<p.length;e+=1)p[e]&&p[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=O(e,n,t);p[t]?p[t].p(i,a):(p[t]=q(i),p[t].c(),p[t].m(s,null))}for(;t<p.length;t+=1)p[t].d(1);p.length=n.length}2&a&&d(s,"aria-label",e[1]),r(t,h=m(u,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:o,o:o,d(s){s&&_(t),f(p,s),e[13](null)}}}function L(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let c,o=p(t,n),{align:d="auto"}=t,{description:r="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:g}=t,k=new j(u(),h());function w(e,t){const s=e.target;f||(c.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),k.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=l(l({},t),x(e)),s(15,o=p(t,n)),"align"in e&&s(0,d=e.align),"description"in e&&s(1,r=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,g=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},o)),64&e.$$.dirty&&delete i.class},[d,r,b,_,f,g,i,c,a,w,m,(e,t,s)=>w(s,Object.assign({index:e},t)),(e,t,s)=>w(s,Object.assign({index:e},t)),function(e){v[e?"unshift":"push"]((()=>{c=e,s(7,c)}))}]}class N extends e{constructor(e){super();const l=document.createElement("style");l.textContent='.mc-tabs{font-family:"Roboto", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:700;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeedea}.mc-tabs__link:active,.mc-tabs__element:active{color:#4d4d4d}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#dddcd5}.mc-tabs__link:focus::before,.mc-tabs__element:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-tabs__link--selected,.mc-tabs__element--selected{color:#007f8c}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#007f8c}.mc-tabs__link--selected:hover,.mc-tabs__element--selected:hover{color:#006974}.mc-tabs__link--selected:active,.mc-tabs__element--selected:active{color:#006974}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(l),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},L,H,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{N as default};
1
+ import{S as e,i as t,a as s,b as a,f as i,s as n,c,e as l,n as o,g as r,h as d,j as b,m,o as _,O as f,p as u,q as p,r as h,u as x,d as g,H as v,t as k,v as w,l as $,k as y,P as A}from"../../index-9ffad6d0.js";import{E as N}from"../../EventHandler-f7ee47ca.js";function j(e,t,s){const a=e.slice();return a[16]=t[s],a[18]=s,a}function C(e){let t,s,i,n,c,o,d,m,f,u=e[16].text+"",p=e[16].iconName&&L(e);function h(...t){return e[12](e[18],e[16],...t)}return{c(){t=l("button"),s=l("span"),p&&p.c(),i=g(),n=k(u),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"type","button"),r(t,"class","mc-tabs__element"),r(t,"id",c=e[16].id),t.disabled=o=e[16].disabled,r(t,"aria-selected",d=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),p&&p.m(s,null),b(s,i),b(s,n),m||(f=$(t,"click",h),m=!0)},p(a,l){(e=a)[16].iconName?p?p.p(e,l):(p=L(e),p.c(),p.m(s,i)):p&&(p.d(1),p=null),256&l&&u!==(u=e[16].text+"")&&y(n,u),256&l&&c!==(c=e[16].id)&&r(t,"id",c),256&l&&o!==(o=e[16].disabled)&&(t.disabled=o),256&l&&d!==(d=e[16].isActive?"true":"false")&&r(t,"aria-selected",d),256&l&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&l&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),p&&p.d(),m=!1,f()}}}function H(e){let t;function s(e,t){return e[16].disabled?T:M}let i=s(e),n=i(e);return{c(){n.c(),t=A()},m(e,s){n.m(e,s),a(e,t,s)},p(e,a){i===(i=s(e))&&n?n.p(e,a):(n.d(1),n=i(e),n&&(n.c(),n.m(t.parentNode,t)))},d(e){n.d(e),e&&_(t)}}}function L(e){let t,s=`<${q(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${q(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function T(e){let t,s,i,n,c,o,d=e[16].text+"",m=e[16].iconName&&O(e);return{c(){t=l("span"),s=l("span"),m&&m.c(),i=g(),n=k(d),r(s,"class","mc-tabs__text"),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",c=e[16].id),r(t,"aria-selected",o=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),m&&m.m(s,null),b(s,i),b(s,n)},p(e,a){e[16].iconName?m?m.p(e,a):(m=O(e),m.c(),m.m(s,i)):m&&(m.d(1),m=null),256&a&&d!==(d=e[16].text+"")&&y(n,d),256&a&&c!==(c=e[16].id)&&r(t,"id",c),256&a&&o!==(o=e[16].isActive?"true":"false")&&r(t,"aria-selected",o),256&a&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),m&&m.d()}}}function M(e){let t,s,i,n,c,o,d,m,f,u=e[16].text+"",p=e[16].iconName&&E(e);function h(...t){return e[11](e[18],e[16],...t)}return{c(){t=l("a"),s=l("span"),p&&p.c(),i=g(),n=k(u),r(s,"class","mc-tabs__text"),r(t,"href",c=e[16].href),r(t,"role","tab"),r(t,"class","mc-tabs__element"),r(t,"id",o=e[16].id),r(t,"aria-selected",d=e[16].isActive?"true":"false"),w(t,"mc-tabs__element--disabled",e[16].disabled),w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,c){a(e,t,c),b(t,s),p&&p.m(s,null),b(s,i),b(s,n),m||(f=$(t,"click",h),m=!0)},p(a,l){(e=a)[16].iconName?p?p.p(e,l):(p=E(e),p.c(),p.m(s,i)):p&&(p.d(1),p=null),256&l&&u!==(u=e[16].text+"")&&y(n,u),256&l&&c!==(c=e[16].href)&&r(t,"href",c),256&l&&o!==(o=e[16].id)&&r(t,"id",o),256&l&&d!==(d=e[16].isActive?"true":"false")&&r(t,"aria-selected",d),256&l&&w(t,"mc-tabs__element--disabled",e[16].disabled),304&l&&w(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&_(t),p&&p.d(),m=!1,f()}}}function O(e){let t,s=`<${q(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${q(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function E(e){let t,s=`<${q(e[16].iconName,e[16].iconColor)} />`;return{c(){t=l("span"),r(t,"class","mc-tabs__icon")},m(e,i){a(e,t,i),t.innerHTML=s},p(e,a){256&a&&s!==(s=`<${q(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&_(t)}}}function R(e){let t,s;function i(e,t){return e[16].href?H:C}let n=i(e),c=n(e);return{c(){t=l("li"),c.c(),s=g(),r(t,"class","mc-tabs__item"),r(t,"role","presentation")},m(e,i){a(e,t,i),c.m(t,null),b(t,s)},p(e,a){n===(n=i(e))&&c?c.p(e,a):(c.d(1),c=n(e),c&&(c.c(),c.m(t,s)))},d(e){e&&_(t),c.d()}}}function S(e){let t,s,i,n=e[8],u=[];for(let t=0;t<n.length;t+=1)u[t]=R(j(e,n,t));let p=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],h={};for(let e=0;e<p.length;e+=1)h=c(h,p[e]);return{c(){t=l("div"),s=l("ul");for(let e=0;e<u.length;e+=1)u[e].c();this.c=o,r(s,"class","mc-tabs__nav"),r(s,"role","tablist"),r(s,"aria-label",e[1]),d(t,h)},m(i,n){a(i,t,n),b(t,s);for(let e=0;e<u.length;e+=1)u[e]&&u[e].m(s,null);e[13](s)},p(e,[a]){if(816&a){let t;for(n=e[8],t=0;t<n.length;t+=1){const i=j(e,n,t);u[t]?u[t].p(i,a):(u[t]=R(i),u[t].c(),u[t].m(s,null))}for(;t<u.length;t+=1)u[t].d(1);u.length=n.length}2&a&&r(s,"aria-label",e[1]),d(t,h=m(p,[13&a&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&a&&e[6]]))},i:o,o:o,d(s){s&&_(t),f(u,s),e[13](null)}}}function q(e,t){return`${e} size="1.5rem" fill="${t}"`}function z(e,t,s){let a,i;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let l,o=u(t,n),{align:r="auto"}=t,{description:d="Tabs"}=t,{nodivider:b=!1}=t,{tabs:m}=t,{type:_="tabs"}=t,{stateless:f=!1}=t,{selectedtab:g}=t,k=new N(p(),h());function w(e,t){const s=e.target;f||(l.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),k.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=c(c({},t),x(e)),s(15,o=u(t,n)),"align"in e&&s(0,r=e.align),"description"in e&&s(1,d=e.description),"nodivider"in e&&s(2,b=e.nodivider),"tabs"in e&&s(10,m=e.tabs),"type"in e&&s(3,_=e.type),"stateless"in e&&s(4,f=e.stateless),"selectedtab"in e&&s(5,g=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,a=m?JSON.parse(m):[]),s(6,i=Object.assign({},o)),64&e.$$.dirty&&delete i.class},[r,d,b,_,f,g,i,l,a,w,m,(e,t,s)=>w(s,Object.assign({index:e},t)),(e,t,s)=>w(s,Object.assign({index:e},t)),function(e){v[e?"unshift":"push"]((()=>{l=e,s(7,l)}))}]}class J extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-tabs{font-family:"Roboto", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow::after,.mc-tabs--no-divider::after{display:none}.mc-tabs__nav{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav,.mc-tabs__select{position:relative}.mc-tabs__link,.mc-tabs__element{font-size:0.875rem;line-height:1.2857142857;font-weight:700;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link::before,.mc-tabs__element::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link::after,.mc-tabs__element::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link:hover .mc-tabs__text,.mc-tabs__element:hover .mc-tabs__text{background-color:#eeedea}.mc-tabs__link:active,.mc-tabs__element:active{color:#4d4d4d}.mc-tabs__link:active .mc-tabs__text,.mc-tabs__element:active .mc-tabs__text{background-color:#dddcd5}.mc-tabs__link:focus::before,.mc-tabs__element:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-tabs__link--selected,.mc-tabs__element--selected{color:#007f8c}.mc-tabs__link--selected::after,.mc-tabs__element--selected::after{background-color:#007f8c}.mc-tabs__link--selected:hover,.mc-tabs__element--selected:hover{color:#006974}.mc-tabs__link--selected:active,.mc-tabs__element--selected:active{color:#006974}.mc-tabs__link--disabled,.mc-tabs__element--disabled{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled,.mc-tabs__link--disabled:hover,.mc-tabs__link--disabled:focus,.mc-tabs__link--disabled:active,.mc-tabs__element--disabled,.mc-tabs__element--disabled:hover,.mc-tabs__element--disabled:focus,.mc-tabs__element--disabled:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs{width:auto}.mc-tabs--full,.mc-tabs--full-centered{width:100%}}@media screen and (max-width: 679px){.mc-tabs:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav{overflow:auto hidden;white-space:nowrap}}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},z,S,n,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},null),e&&(e.target&&a(e.target,this,e.anchor),e.props&&(this.$set(e.props),i()))}static get observedAttributes(){return["align","description","nodivider","tabs","type","stateless","selectedtab"]}get align(){return this.$$.ctx[0]}set align(e){this.$$set({align:e}),i()}get description(){return this.$$.ctx[1]}set description(e){this.$$set({description:e}),i()}get nodivider(){return this.$$.ctx[2]}set nodivider(e){this.$$set({nodivider:e}),i()}get tabs(){return this.$$.ctx[10]}set tabs(e){this.$$set({tabs:e}),i()}get type(){return this.$$.ctx[3]}set type(e){this.$$set({type:e}),i()}get stateless(){return this.$$.ctx[4]}set stateless(e){this.$$set({stateless:e}),i()}get selectedtab(){return this.$$.ctx[5]}set selectedtab(e){this.$$set({selectedtab:e}),i()}}export{J as default};
2
2
  //# sourceMappingURL=Tabs.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let align: TabsAlign = 'auto';\n export let description = 'Tabs';\n export let nodivider = false;\n export let tabs: string;\n export let type: TabsType = 'tabs';\n export let stateless = false;\n export let selectedtab: string | undefined;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tablist: HTMLElement;\n $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function manageTabs(e: Event, tabItem: TabsItems): void {\n const currentEl = e.target as HTMLElement;\n if (stateless) {\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n } else {\n tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n el.classList.remove('mc-tabs__element--selected');\n el.setAttribute('aria-selected', 'false');\n });\n\n currentEl.classList.add('mc-tabs__element--selected');\n currentEl.setAttribute('aria-selected', 'true');\n\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n }\n }\n</script>\n\n<div\n class=\"mc-tabs\n {align && align === 'full' ? ' mc-tabs--full' : ''}\n {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n {...attributes}\n>\n <ul\n class=\"mc-tabs__nav\"\n bind:this={tablist}\n role=\"tablist\"\n aria-label={description}\n >\n {#each parsedTabs as tab, index}\n <li class=\"mc-tabs__item\" role=\"presentation\">\n {#if tab.href}\n {#if !tab.disabled}\n <a\n href={tab.href}\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </a>\n {:else}\n <span\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </span>\n {/if}\n {:else}\n <button\n role=\"tab\"\n type=\"button\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n disabled={tab.disabled}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </button>\n {/if}\n </li>\n {/each}\n </ul>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t_value","ctx","text","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t","create_if_block_1","span1","span1_id_value","span1_aria_selected_value","span0","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let align: TabsAlign = 'auto';\n export let description = 'Tabs';\n export let nodivider = false;\n export let tabs: string;\n export let type: TabsType = 'tabs';\n export let stateless = false;\n export let selectedtab: string | undefined;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tablist: HTMLElement;\n $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function manageTabs(e: Event, tabItem: TabsItems): void {\n const currentEl = e.target as HTMLElement;\n if (stateless) {\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n } else {\n tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n el.classList.remove('mc-tabs__element--selected');\n el.setAttribute('aria-selected', 'false');\n });\n\n currentEl.classList.add('mc-tabs__element--selected');\n currentEl.setAttribute('aria-selected', 'true');\n\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n }\n }\n\n function generateIconName(iconName: string, iconColor: string): string {\n return `${iconName} size=\"1.5rem\" fill=\"${iconColor}\"`;\n }\n</script>\n\n<div\n class=\"mc-tabs\n {align && align === 'full' ? ' mc-tabs--full' : ''}\n {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n {...attributes}\n>\n <ul\n class=\"mc-tabs__nav\"\n bind:this={tablist}\n role=\"tablist\"\n aria-label={description}\n >\n {#each parsedTabs as tab, index}\n <li class=\"mc-tabs__item\" role=\"presentation\">\n {#if tab.href}\n {#if !tab.disabled}\n <a\n href={tab.href}\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </a>\n {:else}\n <span\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </span>\n {/if}\n {:else}\n <button\n role=\"tab\"\n type=\"button\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n disabled={tab.disabled}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </button>\n {/if}\n </li>\n {/each}\n </ul>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t1_value","ctx","text","if_block","iconName","create_if_block_4","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t1","create_if_block_1","raw_value","generateIconName","iconColor","innerHTML","create_if_block_3","span1","span1_id_value","span1_aria_selected_value","span0","create_if_block_2","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- import{E as e,i as t,s,F as i,e as l,g as a,b as n,j as c,n as o,o as r,O as d,q as p,r as b,d as m,H as g,t as v,T as f,l as _,k as u,P as h}from"../../index-9ffad6d0.js";import{E as x}from"../../EventHandler-f7ee47ca.js";function k(e){i(e,"svelte-ip94g5",'.mc-tabs.svelte-ip94g5.svelte-ip94g5{font-family:"Roboto", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs.svelte-ip94g5.svelte-ip94g5::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs--no-divider.svelte-ip94g5.svelte-ip94g5::after{display:none}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5,.mc-tabs__select.svelte-ip94g5.svelte-ip94g5{position:relative}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5{font-size:0.875rem;line-height:1.2857142857;font-weight:700;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5::before,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link.svelte-ip94g5:hover .mc-tabs__text.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5:hover .mc-tabs__text.svelte-ip94g5{background-color:#eeedea}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5:active{color:#4d4d4d}.mc-tabs__link.svelte-ip94g5:active .mc-tabs__text.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5:active .mc-tabs__text.svelte-ip94g5{background-color:#dddcd5}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5:focus::before,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5{color:#007f8c}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5::after{background-color:#007f8c}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5:hover{color:#006974}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5:active{color:#006974}.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:focus,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:focus,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text.svelte-ip94g5.svelte-ip94g5{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon.svelte-ip94g5.svelte-ip94g5{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered.svelte-ip94g5.svelte-ip94g5{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown.svelte-ip94g5.svelte-ip94g5{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs.svelte-ip94g5.svelte-ip94g5{width:auto}.mc-tabs--full.svelte-ip94g5.svelte-ip94g5,.mc-tabs--full-centered.svelte-ip94g5.svelte-ip94g5{width:100%}}@media screen and (max-width: 679px){.mc-tabs.svelte-ip94g5.svelte-ip94g5:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5{overflow:auto hidden;white-space:nowrap}}')}function w(e,t,s){const i=e.slice();return i[12]=t[s],i[14]=s,i}function y(e){let t,s,i,o,d,p,b,m,g,h=e[12].text+"";function x(...t){return e[9](e[14],e[12],...t)}return{c(){t=l("button"),s=l("span"),i=v(h),a(s,"class","mc-tabs__text svelte-ip94g5"),a(t,"role","tab"),a(t,"type","button"),a(t,"class",o=f(q(e[12]))+" svelte-ip94g5"),a(t,"id",d=e[12].id),t.disabled=p=e[12].disabled,a(t,"aria-selected",b=e[12].isActive?"true":"false")},m(e,l){n(e,t,l),c(t,s),c(s,i),m||(g=_(t,"click",x),m=!0)},p(s,l){e=s,32&l&&h!==(h=e[12].text+"")&&u(i,h),32&l&&o!==(o=f(q(e[12]))+" svelte-ip94g5")&&a(t,"class",o),32&l&&d!==(d=e[12].id)&&a(t,"id",d),32&l&&p!==(p=e[12].disabled)&&(t.disabled=p),32&l&&b!==(b=e[12].isActive?"true":"false")&&a(t,"aria-selected",b)},d(e){e&&r(t),m=!1,g()}}}function j(e){let t;function s(e,t){return e[12].disabled?A:$}let i=s(e),l=i(e);return{c(){l.c(),t=h()},m(e,s){l.m(e,s),n(e,t,s)},p(e,a){i===(i=s(e))&&l?l.p(e,a):(l.d(1),l=i(e),l&&(l.c(),l.m(t.parentNode,t)))},d(e){l.d(e),e&&r(t)}}}function A(e){let t,s,i,o,d,p,b=e[12].text+"";return{c(){t=l("span"),s=l("span"),i=v(b),a(s,"class","mc-tabs__text svelte-ip94g5"),a(t,"role","tab"),a(t,"class",o=f(q(e[12]))+" svelte-ip94g5"),a(t,"id",d=e[12].id),a(t,"aria-selected",p=e[12].isActive?"true":"false")},m(e,l){n(e,t,l),c(t,s),c(s,i)},p(e,s){32&s&&b!==(b=e[12].text+"")&&u(i,b),32&s&&o!==(o=f(q(e[12]))+" svelte-ip94g5")&&a(t,"class",o),32&s&&d!==(d=e[12].id)&&a(t,"id",d),32&s&&p!==(p=e[12].isActive?"true":"false")&&a(t,"aria-selected",p)},d(e){e&&r(t)}}}function $(e){let t,s,i,o,d,p,b,m,g,h=e[12].text+"";function x(...t){return e[8](e[14],e[12],...t)}return{c(){t=l("a"),s=l("span"),i=v(h),a(s,"class","mc-tabs__text svelte-ip94g5"),a(t,"href",o=e[12].href),a(t,"role","tab"),a(t,"class",d=f(q(e[12]))+" svelte-ip94g5"),a(t,"id",p=e[12].id),a(t,"aria-selected",b=e[12].isActive?"true":"false")},m(e,l){n(e,t,l),c(t,s),c(s,i),m||(g=_(t,"click",x),m=!0)},p(s,l){e=s,32&l&&h!==(h=e[12].text+"")&&u(i,h),32&l&&o!==(o=e[12].href)&&a(t,"href",o),32&l&&d!==(d=f(q(e[12]))+" svelte-ip94g5")&&a(t,"class",d),32&l&&p!==(p=e[12].id)&&a(t,"id",p),32&l&&b!==(b=e[12].isActive?"true":"false")&&a(t,"aria-selected",b)},d(e){e&&r(t),m=!1,g()}}}function O(e){let t,s;function i(e,t){return e[12].href?j:y}let o=i(e),d=o(e);return{c(){t=l("li"),d.c(),s=m(),a(t,"class","mc-tabs__item"),a(t,"role","presentation")},m(e,i){n(e,t,i),d.m(t,null),c(t,s)},p(e,l){o===(o=i(e))&&d?d.p(e,l):(d.d(1),d=o(e),d&&(d.c(),d.m(t,s)))},d(e){e&&r(t),d.d()}}}function E(e){let t,s,i,p=e[5],b=[];for(let t=0;t<p.length;t+=1)b[t]=O(w(e,p,t));return{c(){t=l("div"),s=l("ul");for(let e=0;e<b.length;e+=1)b[e].c();a(s,"class","mc-tabs__nav svelte-ip94g5"),a(s,"role","tablist"),a(s,"aria-label",e[1]),a(t,"class",i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")+" svelte-ip94g5")},m(i,l){n(i,t,l),c(t,s);for(let e=0;e<b.length;e+=1)b[e]&&b[e].m(s,null);e[10](s)},p(e,[l]){if(96&l){let t;for(p=e[5],t=0;t<p.length;t+=1){const i=w(e,p,t);b[t]?b[t].p(i,l):(b[t]=O(i),b[t].c(),b[t].m(s,null))}for(;t<b.length;t+=1)b[t].d(1);b.length=p.length}2&l&&a(s,"aria-label",e[1]),13&l&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")+" svelte-ip94g5")&&a(t,"class",i)},i:o,o:o,d(s){s&&r(t),d(b,s),e[10](null)}}}function q(e){const t=["mc-tabs__element"];return e.isActive&&t.push("mc-tabs__element--selected"),e.disabled&&t.push("mc-tabs__element--disabled"),t.join(" ")}function H(e,t,s){let i,l,{align:a="auto"}=t,{description:n="Tabs"}=t,{nodivider:c=!1}=t,{tabs:o}=t,{type:r="tabs"}=t,d=new x(p(),b());function m(e,t){const s=e.target;l.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true"),d.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{"align"in e&&s(0,a=e.align),"description"in e&&s(1,n=e.description),"nodivider"in e&&s(2,c=e.nodivider),"tabs"in e&&s(7,o=e.tabs),"type"in e&&s(3,r=e.type)},e.$$.update=()=>{128&e.$$.dirty&&s(5,i=o?JSON.parse(o):[])},[a,n,c,r,l,i,m,o,(e,t,s)=>m(s,Object.assign({index:e},t)),(e,t,s)=>m(s,Object.assign({index:e},t)),function(e){g[e?"unshift":"push"]((()=>{l=e,s(4,l)}))}]}class L extends e{constructor(e){super(),t(this,e,H,E,s,{align:0,description:1,nodivider:2,tabs:7,type:3},k)}}export{L as default};
1
+ import{E as e,i as t,s,F as i,c as l,e as a,g as n,h as c,v as o,b as d,j as r,m,n as b,o as p,O as g,p as v,q as _,r as f,u,d as h,H as x,t as k,l as w,k as y,P as $}from"../../index-9ffad6d0.js";import{E as A}from"../../EventHandler-f7ee47ca.js";function N(e){i(e,"svelte-ip94g5",'.mc-tabs.svelte-ip94g5.svelte-ip94g5{font-family:"Roboto", sans-serif;font-weight:400;background-color:#ffffff;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.mc-tabs.svelte-ip94g5.svelte-ip94g5::after{background:#b3b3b3;content:"";display:block;margin:0 auto;height:1px;width:100%;bottom:0;left:0;position:absolute}.mc-tabs--no-shadow.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs--no-divider.svelte-ip94g5.svelte-ip94g5::after{display:none}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5{list-style:none;margin-left:0;padding-left:0;display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:0;margin-bottom:0}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5,.mc-tabs__select.svelte-ip94g5.svelte-ip94g5{position:relative}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5{font-size:0.875rem;line-height:1.2857142857;font-weight:700;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:none;border:none;color:#666666;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;height:3.5rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;outline:none;padding-left:0.75rem;padding-right:0.75rem;position:relative;text-decoration:none}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5::before,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5::before{border-radius:2px;-webkit-box-shadow:0 0 0 0 transparent;box-shadow:0 0 0 0 transparent;content:"";display:block;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;-webkit-transition:-webkit-box-shadow 200ms ease;transition:-webkit-box-shadow 200ms ease;-o-transition:box-shadow 200ms ease;transition:box-shadow 200ms ease;transition:box-shadow 200ms ease, -webkit-box-shadow 200ms ease;bottom:-0.125rem;top:-0.125rem}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5::after{background-color:transparent;bottom:0;content:"";height:0.25rem;left:1.5rem;position:absolute;right:1.5rem}.mc-tabs__link.svelte-ip94g5:hover .mc-tabs__text.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5:hover .mc-tabs__text.svelte-ip94g5{background-color:#eeedea}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5:active{color:#4d4d4d}.mc-tabs__link.svelte-ip94g5:active .mc-tabs__text.svelte-ip94g5,.mc-tabs__element.svelte-ip94g5:active .mc-tabs__text.svelte-ip94g5{background-color:#dddcd5}.mc-tabs__link.svelte-ip94g5.svelte-ip94g5:focus::before,.mc-tabs__element.svelte-ip94g5.svelte-ip94g5:focus::before{-webkit-box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992;box-shadow:0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #758992}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5{color:#007f8c}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5::after,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5::after{background-color:#007f8c}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5:hover{color:#006974}.mc-tabs__link--selected.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element--selected.svelte-ip94g5.svelte-ip94g5:active{color:#006974}.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5{cursor:not-allowed;background-color:#cccccc;pointer-events:none}.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:focus,.mc-tabs__link--disabled.svelte-ip94g5.svelte-ip94g5:active,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:hover,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:focus,.mc-tabs__element--disabled.svelte-ip94g5.svelte-ip94g5:active{-webkit-box-shadow:none;box-shadow:none}.mc-tabs__text.svelte-ip94g5.svelte-ip94g5{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:0.25rem;display:-webkit-box;display:-ms-flexbox;display:flex;gap:0.25rem;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;padding:0.4375rem 0.75rem;pointer-events:none}.mc-tabs__icon.svelte-ip94g5.svelte-ip94g5{fill:currentColor;height:1.5rem;width:1.5rem}.mc-tabs--full-centered.svelte-ip94g5.svelte-ip94g5{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-tabs--dropdown.svelte-ip94g5.svelte-ip94g5{padding:1rem;width:auto}@media screen and (min-width: 680px){.mc-tabs.svelte-ip94g5.svelte-ip94g5{width:auto}.mc-tabs--full.svelte-ip94g5.svelte-ip94g5,.mc-tabs--full-centered.svelte-ip94g5.svelte-ip94g5{width:100%}}@media screen and (max-width: 679px){.mc-tabs.svelte-ip94g5.svelte-ip94g5:not(.mc-tabs--dropdown)::before{bottom:0.125rem}.mc-tabs__nav.svelte-ip94g5.svelte-ip94g5{overflow:auto hidden;white-space:nowrap}}')}function j(e,t,s){const i=e.slice();return i[16]=t[s],i[18]=s,i}function H(e){let t,s,i,l,c,m,b,g,v,_=e[16].text+"",f=e[16].iconName&&C(e);function u(...t){return e[12](e[18],e[16],...t)}return{c(){t=a("button"),s=a("span"),f&&f.c(),i=h(),l=k(_),n(s,"class","mc-tabs__text svelte-ip94g5"),n(t,"role","tab"),n(t,"type","button"),n(t,"class","mc-tabs__element svelte-ip94g5"),n(t,"id",c=e[16].id),t.disabled=m=e[16].disabled,n(t,"aria-selected",b=e[16].isActive?"true":"false"),o(t,"mc-tabs__element--disabled",e[16].disabled),o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,a){d(e,t,a),r(t,s),f&&f.m(s,null),r(s,i),r(s,l),g||(v=w(t,"click",u),g=!0)},p(a,d){(e=a)[16].iconName?f?f.p(e,d):(f=C(e),f.c(),f.m(s,i)):f&&(f.d(1),f=null),256&d&&_!==(_=e[16].text+"")&&y(l,_),256&d&&c!==(c=e[16].id)&&n(t,"id",c),256&d&&m!==(m=e[16].disabled)&&(t.disabled=m),256&d&&b!==(b=e[16].isActive?"true":"false")&&n(t,"aria-selected",b),256&d&&o(t,"mc-tabs__element--disabled",e[16].disabled),304&d&&o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&p(t),f&&f.d(),g=!1,v()}}}function L(e){let t;function s(e,t){return e[16].disabled?T:M}let i=s(e),l=i(e);return{c(){l.c(),t=$()},m(e,s){l.m(e,s),d(e,t,s)},p(e,a){i===(i=s(e))&&l?l.p(e,a):(l.d(1),l=i(e),l&&(l.c(),l.m(t.parentNode,t)))},d(e){l.d(e),e&&p(t)}}}function C(e){let t,s=`<${S(e[16].iconName,e[16].iconColor)} />`;return{c(){t=a("span"),n(t,"class","mc-tabs__icon svelte-ip94g5")},m(e,i){d(e,t,i),t.innerHTML=s},p(e,i){256&i&&s!==(s=`<${S(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&p(t)}}}function T(e){let t,s,i,l,c,m,b=e[16].text+"",g=e[16].iconName&&O(e);return{c(){t=a("span"),s=a("span"),g&&g.c(),i=h(),l=k(b),n(s,"class","mc-tabs__text svelte-ip94g5"),n(t,"role","tab"),n(t,"class","mc-tabs__element svelte-ip94g5"),n(t,"id",c=e[16].id),n(t,"aria-selected",m=e[16].isActive?"true":"false"),o(t,"mc-tabs__element--disabled",e[16].disabled),o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,a){d(e,t,a),r(t,s),g&&g.m(s,null),r(s,i),r(s,l)},p(e,a){e[16].iconName?g?g.p(e,a):(g=O(e),g.c(),g.m(s,i)):g&&(g.d(1),g=null),256&a&&b!==(b=e[16].text+"")&&y(l,b),256&a&&c!==(c=e[16].id)&&n(t,"id",c),256&a&&m!==(m=e[16].isActive?"true":"false")&&n(t,"aria-selected",m),256&a&&o(t,"mc-tabs__element--disabled",e[16].disabled),304&a&&o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&p(t),g&&g.d()}}}function M(e){let t,s,i,l,c,m,b,g,v,_=e[16].text+"",f=e[16].iconName&&E(e);function u(...t){return e[11](e[18],e[16],...t)}return{c(){t=a("a"),s=a("span"),f&&f.c(),i=h(),l=k(_),n(s,"class","mc-tabs__text svelte-ip94g5"),n(t,"href",c=e[16].href),n(t,"role","tab"),n(t,"class","mc-tabs__element svelte-ip94g5"),n(t,"id",m=e[16].id),n(t,"aria-selected",b=e[16].isActive?"true":"false"),o(t,"mc-tabs__element--disabled",e[16].disabled),o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},m(e,a){d(e,t,a),r(t,s),f&&f.m(s,null),r(s,i),r(s,l),g||(v=w(t,"click",u),g=!0)},p(a,d){(e=a)[16].iconName?f?f.p(e,d):(f=E(e),f.c(),f.m(s,i)):f&&(f.d(1),f=null),256&d&&_!==(_=e[16].text+"")&&y(l,_),256&d&&c!==(c=e[16].href)&&n(t,"href",c),256&d&&m!==(m=e[16].id)&&n(t,"id",m),256&d&&b!==(b=e[16].isActive?"true":"false")&&n(t,"aria-selected",b),256&d&&o(t,"mc-tabs__element--disabled",e[16].disabled),304&d&&o(t,"mc-tabs__element--selected",e[4]?e[16].id==e[5]:e[16].isActive)},d(e){e&&p(t),f&&f.d(),g=!1,v()}}}function O(e){let t,s=`<${S(e[16].iconName,e[16].iconColor)} />`;return{c(){t=a("span"),n(t,"class","mc-tabs__icon svelte-ip94g5")},m(e,i){d(e,t,i),t.innerHTML=s},p(e,i){256&i&&s!==(s=`<${S(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&p(t)}}}function E(e){let t,s=`<${S(e[16].iconName,e[16].iconColor)} />`;return{c(){t=a("span"),n(t,"class","mc-tabs__icon svelte-ip94g5")},m(e,i){d(e,t,i),t.innerHTML=s},p(e,i){256&i&&s!==(s=`<${S(e[16].iconName,e[16].iconColor)} />`)&&(t.innerHTML=s)},d(e){e&&p(t)}}}function q(e){let t,s;function i(e,t){return e[16].href?L:H}let l=i(e),c=l(e);return{c(){t=a("li"),c.c(),s=h(),n(t,"class","mc-tabs__item"),n(t,"role","presentation")},m(e,i){d(e,t,i),c.m(t,null),r(t,s)},p(e,a){l===(l=i(e))&&c?c.p(e,a):(c.d(1),c=l(e),c&&(c.c(),c.m(t,s)))},d(e){e&&p(t),c.d()}}}function z(e){let t,s,i,v=e[8],_=[];for(let t=0;t<v.length;t+=1)_[t]=q(j(e,v,t));let f=[{class:i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":"")},e[6]],u={};for(let e=0;e<f.length;e+=1)u=l(u,f[e]);return{c(){t=a("div"),s=a("ul");for(let e=0;e<_.length;e+=1)_[e].c();n(s,"class","mc-tabs__nav svelte-ip94g5"),n(s,"role","tablist"),n(s,"aria-label",e[1]),c(t,u),o(t,"svelte-ip94g5",!0)},m(i,l){d(i,t,l),r(t,s);for(let e=0;e<_.length;e+=1)_[e]&&_[e].m(s,null);e[13](s)},p(e,[l]){if(816&l){let t;for(v=e[8],t=0;t<v.length;t+=1){const i=j(e,v,t);_[t]?_[t].p(i,l):(_[t]=q(i),_[t].c(),_[t].m(s,null))}for(;t<_.length;t+=1)_[t].d(1);_.length=v.length}2&l&&n(s,"aria-label",e[1]),c(t,u=m(f,[13&l&&i!==(i="mc-tabs "+(e[0]&&"full"===e[0]?" mc-tabs--full":"")+" "+(e[0]&&"centered"===e[0]?" mc-tabs--full-centered":"")+" "+(e[3]?` mc-tabs--${e[3]}`:"")+(e[2]?" mc-tabs--no-divider":""))&&{class:i},64&l&&e[6]])),o(t,"svelte-ip94g5",!0)},i:b,o:b,d(s){s&&p(t),g(_,s),e[13](null)}}}function S(e,t){return`${e} size="1.5rem" fill="${t}"`}function F(e,t,s){let i,a;const n=["align","description","nodivider","tabs","type","stateless","selectedtab"];let c,o=v(t,n),{align:d="auto"}=t,{description:r="Tabs"}=t,{nodivider:m=!1}=t,{tabs:b}=t,{type:p="tabs"}=t,{stateless:g=!1}=t,{selectedtab:h}=t,k=new A(_(),f());function w(e,t){const s=e.target;g||(c.querySelectorAll(".mc-tabs__element").forEach((e=>{e.classList.remove("mc-tabs__element--selected"),e.setAttribute("aria-selected","false")})),s.classList.add("mc-tabs__element--selected"),s.setAttribute("aria-selected","true")),k.dispatch("tab-clicked",Object.assign(t,{target:s}))}return e.$$set=e=>{t=l(l({},t),u(e)),s(15,o=v(t,n)),"align"in e&&s(0,d=e.align),"description"in e&&s(1,r=e.description),"nodivider"in e&&s(2,m=e.nodivider),"tabs"in e&&s(10,b=e.tabs),"type"in e&&s(3,p=e.type),"stateless"in e&&s(4,g=e.stateless),"selectedtab"in e&&s(5,h=e.selectedtab)},e.$$.update=()=>{1024&e.$$.dirty&&s(8,i=b?JSON.parse(b):[]),s(6,a=Object.assign({},o)),64&e.$$.dirty&&delete a.class},[d,r,m,p,g,h,a,c,i,w,b,(e,t,s)=>w(s,Object.assign({index:e},t)),(e,t,s)=>w(s,Object.assign({index:e},t)),function(e){x[e?"unshift":"push"]((()=>{c=e,s(7,c)}))}]}class J extends e{constructor(e){super(),t(this,e,F,z,s,{align:0,description:1,nodivider:2,tabs:10,type:3,stateless:4,selectedtab:5},N)}}export{J as default};
2
2
  //# sourceMappingURL=Tabs.nested.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.nested.js","sources":["../../../../src/components/tabs/Tabs.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let align: TabsAlign = 'auto';\n export let description = 'Tabs';\n export let nodivider = false;\n export let tabs: string;\n export let type: TabsType = 'tabs';\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tablist: HTMLElement;\n $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n\n function setActiveClass(tab: TabsItems): string {\n const tabClasses = ['mc-tabs__element'];\n\n if (tab.isActive) {\n tabClasses.push('mc-tabs__element--selected');\n }\n\n if (tab.disabled) {\n tabClasses.push('mc-tabs__element--disabled');\n }\n\n return tabClasses.join(' ');\n }\n\n function manageTabs(e: Event, tabItem: TabsItems): void {\n const currentEl = e.target as HTMLElement;\n\n tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n el.classList.remove('mc-tabs__element--selected');\n el.setAttribute('aria-selected', 'false');\n });\n\n currentEl.classList.add('mc-tabs__element--selected');\n currentEl.setAttribute('aria-selected', 'true');\n\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n }\n</script>\n\n<div\n class=\"mc-tabs\n {align && align === 'full' ? ' mc-tabs--full' : ''}\n {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n>\n <ul\n class=\"mc-tabs__nav\"\n bind:this={tablist}\n role=\"tablist\"\n aria-label={description}\n >\n {#each parsedTabs as tab, index}\n <li class=\"mc-tabs__item\" role=\"presentation\">\n {#if tab.href}\n {#if !tab.disabled}\n <a\n href={tab.href}\n role=\"tab\"\n class={setActiveClass(tab)}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </a>\n {:else}\n <span\n role=\"tab\"\n class={setActiveClass(tab)}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </span>\n {/if}\n {:else}\n <button\n role=\"tab\"\n type=\"button\"\n class={setActiveClass(tab)}\n id={tab.id}\n disabled={tab.disabled}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {tab.text}\n </span>\n </button>\n {/if}\n </li>\n {/each}\n </ul>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t_value","ctx","text","attr","button","button_class_value","null_to_empty","setActiveClass","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","insert","target","anchor","append","span","dirty","set_data","t","create_if_block_1","span1","span1_class_value","span1_id_value","span1_aria_selected_value","span0","a","a_href_value","href","a_class_value","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","tab","tabClasses","push","join","tablist","align","$$props","description","nodivider","tabs","type","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","event","index","$$value"],"mappings":"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"}
1
+ {"version":3,"file":"Tabs.nested.js","sources":["../../../../src/components/tabs/Tabs.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n import type { TabsAlign, TabsItems, TabsType } from './tabs.types';\n import { EventHandler } from '../../utilities/EventHandler';\n import {\n get_current_component,\n createEventDispatcher,\n } from 'svelte/internal';\n\n export let align: TabsAlign = 'auto';\n export let description = 'Tabs';\n export let nodivider = false;\n export let tabs: string;\n export let type: TabsType = 'tabs';\n export let stateless = false;\n export let selectedtab: string | undefined;\n let eventHandler = new EventHandler(\n get_current_component(),\n createEventDispatcher(),\n );\n let tablist: HTMLElement;\n $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];\n $: attributes = { ...$$restProps };\n $: delete attributes.class;\n function manageTabs(e: Event, tabItem: TabsItems): void {\n const currentEl = e.target as HTMLElement;\n if (stateless) {\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n } else {\n tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {\n el.classList.remove('mc-tabs__element--selected');\n el.setAttribute('aria-selected', 'false');\n });\n\n currentEl.classList.add('mc-tabs__element--selected');\n currentEl.setAttribute('aria-selected', 'true');\n\n eventHandler.dispatch(\n 'tab-clicked',\n Object.assign(tabItem, { target: currentEl }),\n );\n }\n }\n\n function generateIconName(iconName: string, iconColor: string): string {\n return `${iconName} size=\"1.5rem\" fill=\"${iconColor}\"`;\n }\n</script>\n\n<div\n class=\"mc-tabs\n {align && align === 'full' ? ' mc-tabs--full' : ''}\n {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}\n {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}\"\n {...attributes}\n>\n <ul\n class=\"mc-tabs__nav\"\n bind:this={tablist}\n role=\"tablist\"\n aria-label={description}\n >\n {#each parsedTabs as tab, index}\n <li class=\"mc-tabs__item\" role=\"presentation\">\n {#if tab.href}\n {#if !tab.disabled}\n <a\n href={tab.href}\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </a>\n {:else}\n <span\n role=\"tab\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n aria-selected={tab.isActive ? 'true' : 'false'}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </span>\n {/if}\n {:else}\n <button\n role=\"tab\"\n type=\"button\"\n class=\"mc-tabs__element\"\n class:mc-tabs__element--disabled={tab.disabled}\n class:mc-tabs__element--selected={stateless\n ? tab.id == selectedtab\n : tab.isActive}\n id={tab.id}\n disabled={tab.disabled}\n aria-selected={tab.isActive ? 'true' : 'false'}\n on:click={(event) =>\n manageTabs(event, Object.assign({ index: index }, tab))}\n >\n <span class=\"mc-tabs__text\">\n {#if tab.iconName}\n <span class=\"mc-tabs__icon\"\n >{@html `<${generateIconName(\n tab.iconName,\n tab.iconColor,\n )} />`}</span\n >\n {/if}\n {tab.text}\n </span>\n </button>\n {/if}\n </li>\n {/each}\n </ul>\n</div>\n\n<style lang=\"scss\">\n @import '@mozaic-ds/styles/settings-tools/all-settings';\n @import '@mozaic-ds/styles/components/c.tabs';\n</style>\n"],"names":["t1_value","ctx","text","if_block","iconName","create_if_block_4","attr","button","button_id_value","id","disabled","button_disabled_value","button_aria_selected_value","isActive","toggle_class","insert","target","anchor","append","span","dirty","set_data","t1","create_if_block_1","raw_value","generateIconName","iconColor","innerHTML","create_if_block_3","span1","span1_id_value","span1_aria_selected_value","span0","create_if_block_2","a","a_href_value","href","a_id_value","a_aria_selected_value","create_if_block","li","length","i","div","ul","class","div_class_value","tablist","align","$$props","description","nodivider","tabs","type","stateless","selectedtab","eventHandler","EventHandler","get_current_component","createEventDispatcher","manageTabs","e","tabItem","currentEl","querySelectorAll","forEach","el","classList","remove","setAttribute","add","dispatch","Object","assign","$$invalidate","parsedTabs","JSON","parse","attributes","$$restProps","event","index","tab","$$value"],"mappings":"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"}
@@ -13,42 +13,41 @@
13
13
  export let nodivider = false;
14
14
  export let tabs: string;
15
15
  export let type: TabsType = 'tabs';
16
+ export let stateless = false;
17
+ export let selectedtab: string | undefined;
16
18
  let eventHandler = new EventHandler(
17
19
  get_current_component(),
18
20
  createEventDispatcher(),
19
21
  );
20
22
  let tablist: HTMLElement;
21
23
  $: parsedTabs = tabs ? (JSON.parse(tabs) as TabsItems[]) : [];
22
-
23
- function setActiveClass(tab: TabsItems): string {
24
- const tabClasses = ['mc-tabs__element'];
25
-
26
- if (tab.isActive) {
27
- tabClasses.push('mc-tabs__element--selected');
28
- }
29
-
30
- if (tab.disabled) {
31
- tabClasses.push('mc-tabs__element--disabled');
32
- }
33
-
34
- return tabClasses.join(' ');
35
- }
36
-
24
+ $: attributes = { ...$$restProps };
25
+ $: delete attributes.class;
37
26
  function manageTabs(e: Event, tabItem: TabsItems): void {
38
27
  const currentEl = e.target as HTMLElement;
28
+ if (stateless) {
29
+ eventHandler.dispatch(
30
+ 'tab-clicked',
31
+ Object.assign(tabItem, { target: currentEl }),
32
+ );
33
+ } else {
34
+ tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {
35
+ el.classList.remove('mc-tabs__element--selected');
36
+ el.setAttribute('aria-selected', 'false');
37
+ });
39
38
 
40
- tablist.querySelectorAll('.mc-tabs__element').forEach((el): void => {
41
- el.classList.remove('mc-tabs__element--selected');
42
- el.setAttribute('aria-selected', 'false');
43
- });
39
+ currentEl.classList.add('mc-tabs__element--selected');
40
+ currentEl.setAttribute('aria-selected', 'true');
44
41
 
45
- currentEl.classList.add('mc-tabs__element--selected');
46
- currentEl.setAttribute('aria-selected', 'true');
42
+ eventHandler.dispatch(
43
+ 'tab-clicked',
44
+ Object.assign(tabItem, { target: currentEl }),
45
+ );
46
+ }
47
+ }
47
48
 
48
- eventHandler.dispatch(
49
- 'tab-clicked',
50
- Object.assign(tabItem, { target: currentEl }),
51
- );
49
+ function generateIconName(iconName: string, iconColor: string): string {
50
+ return `${iconName} size="1.5rem" fill="${iconColor}"`;
52
51
  }
53
52
  </script>
54
53
 
@@ -57,6 +56,7 @@
57
56
  {align && align === 'full' ? ' mc-tabs--full' : ''}
58
57
  {align && align === 'centered' ? ' mc-tabs--full-centered' : ''}
59
58
  {type ? ` mc-tabs--${type}` : ''}{nodivider ? ' mc-tabs--no-divider' : ''}"
59
+ {...attributes}
60
60
  >
61
61
  <ul
62
62
  class="mc-tabs__nav"
@@ -71,24 +71,48 @@
71
71
  <a
72
72
  href={tab.href}
73
73
  role="tab"
74
- class={setActiveClass(tab)}
74
+ class="mc-tabs__element"
75
+ class:mc-tabs__element--disabled={tab.disabled}
76
+ class:mc-tabs__element--selected={stateless
77
+ ? tab.id == selectedtab
78
+ : tab.isActive}
75
79
  id={tab.id}
76
80
  aria-selected={tab.isActive ? 'true' : 'false'}
77
81
  on:click={(event) =>
78
82
  manageTabs(event, Object.assign({ index: index }, tab))}
79
83
  >
80
84
  <span class="mc-tabs__text">
85
+ {#if tab.iconName}
86
+ <span class="mc-tabs__icon"
87
+ >{@html `<${generateIconName(
88
+ tab.iconName,
89
+ tab.iconColor,
90
+ )} />`}</span
91
+ >
92
+ {/if}
81
93
  {tab.text}
82
94
  </span>
83
95
  </a>
84
96
  {:else}
85
97
  <span
86
98
  role="tab"
87
- class={setActiveClass(tab)}
99
+ class="mc-tabs__element"
100
+ class:mc-tabs__element--disabled={tab.disabled}
101
+ class:mc-tabs__element--selected={stateless
102
+ ? tab.id == selectedtab
103
+ : tab.isActive}
88
104
  id={tab.id}
89
105
  aria-selected={tab.isActive ? 'true' : 'false'}
90
106
  >
91
107
  <span class="mc-tabs__text">
108
+ {#if tab.iconName}
109
+ <span class="mc-tabs__icon"
110
+ >{@html `<${generateIconName(
111
+ tab.iconName,
112
+ tab.iconColor,
113
+ )} />`}</span
114
+ >
115
+ {/if}
92
116
  {tab.text}
93
117
  </span>
94
118
  </span>
@@ -97,7 +121,11 @@
97
121
  <button
98
122
  role="tab"
99
123
  type="button"
100
- class={setActiveClass(tab)}
124
+ class="mc-tabs__element"
125
+ class:mc-tabs__element--disabled={tab.disabled}
126
+ class:mc-tabs__element--selected={stateless
127
+ ? tab.id == selectedtab
128
+ : tab.isActive}
101
129
  id={tab.id}
102
130
  disabled={tab.disabled}
103
131
  aria-selected={tab.isActive ? 'true' : 'false'}
@@ -105,6 +133,14 @@
105
133
  manageTabs(event, Object.assign({ index: index }, tab))}
106
134
  >
107
135
  <span class="mc-tabs__text">
136
+ {#if tab.iconName}
137
+ <span class="mc-tabs__icon"
138
+ >{@html `<${generateIconName(
139
+ tab.iconName,
140
+ tab.iconColor,
141
+ )} />`}</span
142
+ >
143
+ {/if}
108
144
  {tab.text}
109
145
  </span>
110
146
  </button>