@mozaic-ds/web-components 0.7.0 → 0.9.0-beta

package/public/components/autocomplete/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { tick } from 'svelte';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { clickOutside } from '../../utilities/ClickOutside';\n  import type { ListboxItems } from '../listbox/listbox.types';\n  import type { TextInputSize } from '../textinput/textinput.types';\n\n  import Tag from '../tag/Tag.nested.svelte';\n  import Loader from '../loader/Loader.nested.svelte';\n  import TextInput from '../textinput/Textinput.nested.svelte';\n  import Listbox from '../listbox/Listbox.nested.svelte';\n\n  export let maxwidth = '100%';\n  export let tagid: string;\n  export let taglabel = '';\n  export let placeholder: string;\n  export let filter = true;\n  export let disabled = false;\n  export let size: TextInputSize = 'm';\n  export let isinvalid: boolean;\n  export let inputvalue: string;\n  export let id: string;\n  export let loading = false;\n  export let required = false;\n  export let items: string;\n  export let value: any;\n  export let open = false;\n  export let multiple = false;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let nosort = false;\n  export let layertitle = 'Title layer';\n  export let showmoretagslabel = 'Show more';\n  export let maxnumbertoshowtags = 12;\n  export let alltags = false;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const component: any = get_current_component();\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\n  let tag: any;\n  let tagWidth = '0px';\n  let tagValue: any;\n  let sortedListItems: any;\n  let isfiltered = false;\n  let selectedItems: ListboxItems[] = [];\n  let openLayer: any = null;\n\n  $: localInputValue = inputvalue;\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: localItems = parsedItems;\n  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n  $: setTagLabel = () => {\n    return listboxValue.length.toString() + ' ' + taglabel;\n  };\n  $: watchListboxValue(listboxValue);\n  $: setTagWidth(tagValue);\n  $: openState = open;\n  $: {\n    const eventName = openState ? 'open' : 'close';\n    eventHandler.dispatch(eventName, openState);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function clearListbox() {\n    listboxValue = multiple ? [] : '';\n    closeListBox();\n    eventHandler.dispatch('clear', true);\n  }\n\n  function closeListBox() {\n    openState = false;\n\n    if (multiple && !nosort) {\n      sortItems();\n    } else {\n      localItems = parsedItems;\n    }\n  }\n\n  function onChange() {\n    eventHandler.dispatch('onchange', listboxValue);\n\n    if (!multiple) {\n      closeListBox();\n    }\n  }\n\n  function getSelectedItems(val?: string) {\n    const value = val ? val : listboxValue;\n\n    const selectedItems = parsedItems.filter((item: ListboxItems) => {\n      return multiple\n        ? value.includes(item[datavalueexpr])\n        : value === item[datavalueexpr];\n    });\n    return selectedItems;\n  }\n\n  function sortItems() {\n    sortedListItems = parsedItems;\n    const selectedItems = getSelectedItems();\n\n    sortedListItems.sort((a: any, b: any) => {\n      const hasItemA = selectedItems.includes(a);\n      const hasItemB = selectedItems.includes(b);\n\n      if (hasItemA === hasItemB) {\n        return a[datavalueexpr] - b[datavalueexpr];\n      } else if (hasItemA < hasItemB) {\n        return 1;\n      } else {\n        return -1;\n      }\n    });\n\n    localItems = sortedListItems;\n  }\n\n  function openLayerFn() {\n    openLayer = true;\n  }\n\n  function closeLayerFn() {\n    openLayer = null;\n  }\n\n  function handleInputValue(value: any) {\n    eventHandler.dispatch('oninput', value);\n  }\n\n  function filterListbox(value: any) {\n    if (!filter) {\n      return;\n    }\n\n    if (value.length) {\n      localItems = parsedItems.filter((item: any) =>\n        item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n      );\n    } else {\n      localItems = parsedItems;\n    }\n\n    isfiltered = !localItems.length;\n\n    eventHandler.dispatch('onfilter', localItems);\n  }\n\n  function onInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n    handleInputValue(value);\n    filterListbox(value);\n  }\n\n  function onScrollEnd() {\n    eventHandler.dispatch('scrollend', true);\n  }\n\n  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\n  }\n\n  function removeTagSelected(itemSelectedId: any) {\n    listboxValue = listboxValue.filter(\n      (value: any) => value !== itemSelectedId,\n    );\n    eventHandler.dispatch('onchange', listboxValue);\n  }\n\n  // Watch Functions\n  async function watchListboxValue(value: any) {\n    await tick();\n    selectedItems = getSelectedItems(value);\n    if (!multiple) {\n      const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n      localInputValue = seletedLabels.join(', ');\n    } else {\n      tagValue = value;\n    }\n  }\n\n  async function setTagWidth(tagValue: any) {\n    await tick();\n\n    tagWidth =\n      tag && tagValue && tagValue.length\n        ? `${\n            component.shadowRoot.querySelector('.mc-tag-removable').clientWidth\n          }px`\n        : '0px';\n  }\n</script>\n\n<div\n  class=\"mc-autocomplete\"\n  class:mc-autocomplete--multi={multiple}\n  style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n  use:clickOutside\n  on:outclick={closeListBox}\n  {...attributes}\n>\n  <div class=\"mc-autocomplete__main\">\n    <!--  TAG REMOVABLE -->\n    {#if multiple && listboxValue.length > 0 && !alltags}\n      <Tag\n        id={tagid ? tagid : `autocompleteTag-${uuid}`}\n        class=\"mc-autocomplete__tag\"\n        label={setTagLabel()}\n        size=\"s\"\n        type=\"removable\"\n        dark={false}\n        disabled={false}\n        href=\"\"\n        name=\"\"\n        value=\"\"\n        selected={false}\n        bind:this={tag}\n        on:tag-removed={clearListbox}\n      />\n    {/if}\n\n    <!-- TEXT INPUT -->\n    <TextInput\n      classinput=\"mc-autocomplete__trigger\"\n      name={id}\n      bind:value={localInputValue}\n      {placeholder}\n      inputtype=\"text\"\n      {isinvalid}\n      {disabled}\n      {size}\n      {required}\n      iconname=\"navigation-display-search-24px\"\n      rightalign={false}\n      isvalid={false}\n      min=\"\"\n      max=\"\"\n      on:input={onInput}\n      on:click={() => (openState = true)}\n      on:change\n      on:blur\n    />\n\n    <div class=\"mc-autocomplete__tools\">\n      <!-- LOADER -->\n      {#if loading}\n        <Loader\n          size=\"s\"\n          theme=\"primary\"\n          text=\"\"\n          class=\"mc-autocomplete__loader\"\n        />\n      {/if}\n\n      <!-- CLEAR BUTTON -->\n      {#if localInputValue != null && localInputValue != ''}\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          on:click|stopPropagation={() => {\n            localInputValue = '';\n            localItems = parsedItems;\n            isfiltered = false;\n            if (!multiple) {\n              clearListbox();\n            }\n          }}\n        >\n          <navigation-control-tag--cross-24px />\n          <span class=\"mc-autocomplete__clear-text\">Clear</span>\n        </button>\n      {/if}\n    </div>\n  </div>\n\n  <!-- LISTBOX -->\n  <Listbox\n    items={JSON.stringify(localItems)}\n    open={openState}\n    {multiple}\n    {isfiltered}\n    {emptysearchlabel}\n    {maxwidth}\n    {datatextexpr}\n    {datavalueexpr}\n    {selectall}\n    {labelselectall}\n    bind:value={listboxValue}\n    on:change={onChange}\n    on:scrollend={onScrollEnd}\n    on:select-all={onSelectAll}\n  />\n\n  {#if multiple && alltags}\n    <div class=\"tags-selected\">\n      {#each selectedItems as selectedItem, index}\n        {#if index < maxnumbertoshowtags}\n          <div class=\"tag-selected\">\n            <m-tag\n              id={selectedItem.id}\n              label={selectedItem.label}\n              size=\"s\"\n              type=\"removable\"\n              on:tag-removed={() => removeTagSelected(selectedItem.id)}\n            />\n          </div>\n        {/if}\n      {/each}\n      {#if listboxValue.length > maxnumbertoshowtags}\n        <div class=\"tag-selected\">\n          <m-tag\n            id=\"id-tag\"\n            label=\"({listboxValue.length}) {showmoretagslabel} \"\n            size=\"s\"\n            type=\"link\"\n            on:tag-selected={() => openLayerFn()}\n          />\n        </div>\n      {/if}\n    </div>\n  {/if}\n\n  <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n  <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n  <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\n  {#if multiple && alltags}\n    <div>\n      <m-layer\n        title={layertitle}\n        layertitletag=\"h3\"\n        isopen={openLayer}\n        on:layer-closed={() => closeLayerFn()}\n      >\n        <small slot=\"content\">\n          <div class=\"tags-selected\">\n            {#each selectedItems as selectedItem}\n              <div class=\"tag-selected\">\n                <m-tag\n                  id={selectedItem.id}\n                  label={selectedItem.label}\n                  size=\"s\"\n                  type=\"removable\"\n                  on:tag-removed={() => removeTagSelected(selectedItem.id)}\n                />\n              </div>\n            {/each}\n          </div>\n        </small>\n      </m-layer>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.autocomplete';\n\n  // Autocomplete\n  // NOTE: These styles with the \"!important\" allow to overload the edge effects\n  // due to the scoping applied by Svelte on the CSS selectors\n  .mc-autocomplete {\n    &__tag {\n      position: absolute !important; // due to the Svelte CSS scope\n    }\n\n    &--multi {\n      .mc-autocomplete__trigger {\n        padding-left: calc(\n          2.9375rem + var(--autocomplete-tag-width)\n        ) !important;\n      }\n    }\n  }\n\n  // Selected Tags\n  .tags-selected {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .tag-selected {\n    margin-top: 1em;\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n</style>\n"],"names":["ctx","insert","target","button","anchor","length","i","create_if_block_2","div","set_custom_element_data","m_tag","m_tag_id_value","id","m_tag_label_value","label","append","dirty","if_block","create_if_block_3","div1","m_layer","small","div0","if_block0","create_if_block_6","create_if_block_5","if_block2","create_if_block_4","JSON","stringify","if_block3","create_if_block_1","if_block4","create_if_block","style","div2_style_value","div2","span0","span1","current","maxwidth","$$props","tagid","taglabel","placeholder","filter","disabled","size","isinvalid","inputvalue","loading","required","items","value","open","multiple","emptysearchlabel","datatextexpr","datavalueexpr","nosort","layertitle","showmoretagslabel","maxnumbertoshowtags","alltags","selectall","labelselectall","component","get_current_component","uuid","Math","random","tag","tagValue","sortedListItems","eventHandler","EventHandler","tagWidth","isfiltered","selectedItems","openLayer","clearListbox","listboxValue","closeListBox","dispatch","$$invalidate","openState","parsedItems","getSelectedItems","sort","a","b","hasItemA","includes","hasItemB","localItems","sortItems","val","item","openLayerFn","closeLayerFn","removeTagSelected","itemSelectedId","localInputValue","parse","setTagLabel","toString","async","tick","seletedLabels","map","join","watchListboxValue","shadowRoot","querySelector","clientWidth","setTagWidth","eventName","attributes","Object","assign","$$restProps","class","e","handleInputValue","toUpperCase","filterListbox","detail","$$value","value$1","selectedItem"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","sources":["../../../src/components/autocomplete/Autocomplete.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { tick } from 'svelte';\n  import { get_current_component } from 'svelte/internal';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import { clickOutside } from '../../utilities/ClickOutside';\n  import type { ListboxItems } from '../listbox/listbox.types';\n  import type { TextInputSize } from '../textinput/textinput.types';\n\n  import Tag from '../tag/Tag.nested.svelte';\n  import Loader from '../loader/Loader.nested.svelte';\n  import TextInput from '../textinput/Textinput.nested.svelte';\n  import Listbox from '../listbox/Listbox.nested.svelte';\n\n  export let maxwidth = '100%';\n  export let tagid: string;\n  export let taglabel = '';\n  export let placeholder: string;\n  export let filter = true;\n  export let disabled = false;\n  export let size: TextInputSize = 'm';\n  export let isinvalid: boolean;\n  export let inputvalue: string;\n  export let id: string;\n  export let loading = false;\n  export let required = false;\n  export let items: string;\n  export let value: any;\n  export let open = false;\n  export let multiple = false;\n  export let emptysearchlabel = 'No results found';\n  export let datatextexpr = 'label';\n  export let datavalueexpr = 'value';\n  export let nosort = false;\n  export let layertitle = 'Title layer';\n  export let showmoretagslabel = 'Show more';\n  export let maxnumbertoshowtags = 12;\n  export let alltags = false;\n  export let selectall = false;\n  export let labelselectall = 'Select all';\n\n  const component: any = get_current_component();\n  const uuid = Math.random();\n  let eventHandler = new EventHandler();\n  let tag: any;\n  let tagWidth = '0px';\n  let tagValue: any;\n  let sortedListItems: any;\n  let isfiltered = false;\n  let selectedItems: ListboxItems[] = [];\n  let openLayer: any = null;\n\n  $: localInputValue = inputvalue;\n  $: parsedItems = items ? (JSON.parse(items) as ListboxItems[]) : [];\n  $: localItems = parsedItems;\n  $: listboxValue = !value && multiple ? [] : value ? JSON.parse(value) : value;\n  $: setTagLabel = () => {\n    return listboxValue.length.toString() + ' ' + taglabel;\n  };\n  $: watchListboxValue(listboxValue);\n  $: setTagWidth(tagValue);\n  $: openState = open;\n  $: {\n    const eventName = openState ? 'open' : 'close';\n    eventHandler.dispatch(eventName, openState);\n  }\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function clearListbox() {\n    listboxValue = multiple ? [] : '';\n    closeListBox();\n    eventHandler.dispatch('clear', true);\n  }\n\n  function closeListBox() {\n    openState = false;\n\n    if (multiple && !nosort) {\n      sortItems();\n    } else {\n      localItems = parsedItems;\n    }\n  }\n\n  function onChange() {\n    eventHandler.dispatch('onchange', listboxValue);\n\n    if (!multiple) {\n      closeListBox();\n    }\n  }\n\n  function getSelectedItems(val?: string) {\n    const value = val ? val : listboxValue;\n\n    const selectedItems = parsedItems.filter((item: ListboxItems) => {\n      return multiple\n        ? value.includes(item[datavalueexpr])\n        : value === item[datavalueexpr];\n    });\n    return selectedItems;\n  }\n\n  function sortItems() {\n    sortedListItems = parsedItems;\n    const selectedItems = getSelectedItems();\n\n    sortedListItems.sort((a: any, b: any) => {\n      const hasItemA = selectedItems.includes(a);\n      const hasItemB = selectedItems.includes(b);\n\n      if (hasItemA === hasItemB) {\n        return a[datavalueexpr] - b[datavalueexpr];\n      } else if (hasItemA < hasItemB) {\n        return 1;\n      } else {\n        return -1;\n      }\n    });\n\n    localItems = sortedListItems;\n  }\n\n  function openLayerFn() {\n    openLayer = true;\n  }\n\n  function closeLayerFn() {\n    openLayer = null;\n  }\n\n  function handleInputValue(value: any) {\n    eventHandler.dispatch('oninput', value);\n  }\n\n  function filterListbox(value: any) {\n    if (!filter) {\n      return;\n    }\n\n    if (value.length) {\n      localItems = parsedItems.filter((item: any) =>\n        item[datatextexpr].toUpperCase().includes(value.toUpperCase()),\n      );\n    } else {\n      localItems = parsedItems;\n    }\n\n    isfiltered = !localItems.length;\n\n    eventHandler.dispatch('onfilter', localItems);\n  }\n\n  function onInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n    handleInputValue(value);\n    filterListbox(value);\n  }\n\n  function onScrollEnd() {\n    eventHandler.dispatch('scrollend', true);\n  }\n\n  function onSelectAll(e: CustomEvent) {\n    eventHandler.dispatch('select-all', e.detail);\n  }\n\n  function removeTagSelected(itemSelectedId: any) {\n    listboxValue = listboxValue.filter(\n      (value: any) => value !== itemSelectedId,\n    );\n    eventHandler.dispatch('onchange', listboxValue);\n  }\n\n  // Watch Functions\n  async function watchListboxValue(value: any) {\n    await tick();\n    selectedItems = getSelectedItems(value);\n    if (!multiple) {\n      const seletedLabels = selectedItems.map((item) => item[datatextexpr]);\n      localInputValue = seletedLabels.join(', ');\n    } else {\n      tagValue = value;\n    }\n  }\n\n  async function setTagWidth(tagValue: any) {\n    await tick();\n\n    tagWidth =\n      tag && tagValue && tagValue.length\n        ? `${\n            component.shadowRoot.querySelector('.mc-tag-removable').clientWidth\n          }px`\n        : '0px';\n  }\n</script>\n\n<div\n  class=\"mc-autocomplete\"\n  class:mc-autocomplete--multi={multiple}\n  style=\"--autocomplete-tag-width: {tagWidth}; --autocomplete-width: {maxwidth};\"\n  use:clickOutside\n  on:outclick={closeListBox}\n  {...attributes}\n>\n  <div class=\"mc-autocomplete__main\">\n    <!--  TAG REMOVABLE -->\n    {#if multiple && listboxValue.length > 0 && !alltags}\n      <Tag\n        id={tagid ? tagid : `autocompleteTag-${uuid}`}\n        class=\"mc-autocomplete__tag\"\n        label={setTagLabel()}\n        size=\"s\"\n        type=\"removable\"\n        dark={false}\n        disabled={false}\n        href=\"\"\n        name=\"\"\n        value=\"\"\n        selected={false}\n        bind:this={tag}\n        on:tag-removed={clearListbox}\n      />\n    {/if}\n\n    <!-- TEXT INPUT -->\n    <TextInput\n      classinput=\"mc-autocomplete__trigger\"\n      name={id}\n      bind:value={localInputValue}\n      {placeholder}\n      inputtype=\"text\"\n      {isinvalid}\n      {disabled}\n      {size}\n      {required}\n      iconname=\"navigation-display-search-24px\"\n      rightalign={false}\n      isvalid={false}\n      min=\"\"\n      max=\"\"\n      on:input={onInput}\n      on:click={() => (openState = true)}\n      on:change\n      on:blur\n    />\n\n    <div class=\"mc-autocomplete__tools\">\n      <!-- LOADER -->\n      {#if loading}\n        <Loader\n          size=\"s\"\n          theme=\"primary\"\n          text=\"\"\n          class=\"mc-autocomplete__loader\"\n        />\n      {/if}\n\n      <!-- CLEAR BUTTON -->\n      {#if localInputValue != null && localInputValue != ''}\n        <button\n          class=\"mc-autocomplete__clear\"\n          type=\"button\"\n          on:click|stopPropagation={() => {\n            localInputValue = '';\n            localItems = parsedItems;\n            isfiltered = false;\n            if (!multiple) {\n              clearListbox();\n            }\n          }}\n        >\n          <navigation-control-tag--cross-24px />\n          <span class=\"mc-autocomplete__clear-text\">Clear</span>\n        </button>\n      {/if}\n    </div>\n  </div>\n\n  <!-- LISTBOX -->\n  <Listbox\n    items={JSON.stringify(localItems)}\n    open={openState}\n    {multiple}\n    {isfiltered}\n    {emptysearchlabel}\n    {maxwidth}\n    {datatextexpr}\n    {datavalueexpr}\n    {selectall}\n    {labelselectall}\n    bind:value={listboxValue}\n    on:change={onChange}\n    on:scrollend={onScrollEnd}\n    on:select-all={onSelectAll}\n  />\n\n  {#if multiple && alltags}\n    <div class=\"tags-selected\">\n      {#each selectedItems as selectedItem, index}\n        {#if index < maxnumbertoshowtags}\n          <div class=\"tag-selected\">\n            <m-tag\n              id={selectedItem.id}\n              label={selectedItem.label}\n              size=\"s\"\n              type=\"removable\"\n              on:tag-removed={() => removeTagSelected(selectedItem.id)}\n            />\n          </div>\n        {/if}\n      {/each}\n      {#if listboxValue.length > maxnumbertoshowtags}\n        <div class=\"tag-selected\">\n          <m-tag\n            id=\"id-tag\"\n            label=\"({listboxValue.length}) {showmoretagslabel} \"\n            size=\"s\"\n            type=\"link\"\n            on:tag-selected={() => openLayerFn()}\n          />\n        </div>\n      {/if}\n    </div>\n  {/if}\n\n  <!-- <span class=\"mc-autocomplete__tag\" style=\"display:none;\" /> -->\n  <span class=\"mc-autocomplete__loader\" style=\"display:none;\" />\n  <span class=\"mc-text-input mc-autocomplete__trigger\" style=\"display:none;\" />\n\n  {#if multiple && alltags}\n    <div>\n      <m-layer\n        title={layertitle}\n        layertitletag=\"h3\"\n        isopen={openLayer}\n        on:layer-closed={() => closeLayerFn()}\n      >\n        <small slot=\"content\">\n          <div class=\"tags-selected\">\n            {#each selectedItems as selectedItem}\n              <div class=\"tag-selected\">\n                <m-tag\n                  id={selectedItem.id}\n                  label={selectedItem.label}\n                  size=\"s\"\n                  type=\"removable\"\n                  on:tag-removed={() => removeTagSelected(selectedItem.id)}\n                />\n              </div>\n            {/each}\n          </div>\n        </small>\n      </m-layer>\n    </div>\n  {/if}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/all-settings';\n  @import '@mozaic-ds/styles/components/c.autocomplete';\n\n  // Autocomplete\n  // NOTE: These styles with the \"!important\" allow to overload the edge effects\n  // due to the scoping applied by Svelte on the CSS selectors\n  .mc-autocomplete {\n    &__tag {\n      position: absolute !important; // due to the Svelte CSS scope\n    }\n\n    &--multi {\n      .mc-autocomplete__trigger {\n        padding-left: calc(\n          2.9375rem + var(--autocomplete-tag-width)\n        ) !important;\n      }\n    }\n  }\n\n  // Selected Tags\n  .tags-selected {\n    display: flex;\n    flex-wrap: wrap;\n  }\n\n  .tag-selected {\n    margin-top: 1em;\n    margin-left: 5px;\n    margin-right: 5px;\n  }\n</style>\n"],"names":[],"mappings":"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"}

package/public/components/badge/Badge.js

@@ -1,2 +1,156 @@
-import{S as e,i as t,a as r,b as s,f as a,s as o,c,e as l,t as n,n as d,h as i,j as b,B as p,X as u,m as g,o as f,p as m,r as h,q as $}from"../../index-c33b3772.js";import{c as y}from"../../EventForward-8492ff62.js";function x(e){let t,r,a,o,m,h=[{class:a=w(e[1])+" "+e[3]},e[2]],$={};for(let e=0;e<h.length;e+=1)$=c($,h[e]);return{c(){t=l("div"),r=n(e[0]),this.c=d,i(t,$)},m(a,c){s(a,t,c),b(t,r),o||(m=p(e[4].call(null,t)),o=!0)},p(e,[s]){1&s&&u(r,e[0],$.contenteditable),i(t,$=g(h,[10&s&&a!==(a=w(e[1])+" "+e[3])&&{class:a},4&s&&e[2]]))},i:d,o:d,d(e){e&&f(t),o=!1,m()}}}function w(e){const t=["mc-badge"];return e&&t.push(`mc-badge--${e}`),t.join(" ")}function k(e,t,r){let s,a;const o=["label","type"];let l=m(t,o),{label:n}=t,{type:d}=t;const i=y(h());return e.$$set=e=>{r(6,t=c(c({},t),$(e))),r(5,l=m(t,o)),"label"in e&&r(0,n=e.label),"type"in e&&r(1,d=e.type)},e.$$.update=()=>{r(3,s=t.class),r(2,a=Object.assign({},l)),4&e.$$.dirty&&delete a.class},t=$(t),[n,d,a,s,i]}class j extends e{constructor(e){super();const c=document.createElement("style");c.textContent='.mc-badge{border-radius:4px;border:1px solid transparent;display:inline-block;padding:0.125rem 0.4375rem;text-transform:lowercase;white-space:nowrap;font-family:"LeroyMerlin", sans-serif;font-weight:600;font-size:0.875rem;line-height:1.2857142857;background-color:#daeff7;border-color:#0b96cc;color:#005c91}.mc-badge::first-letter{text-transform:uppercase}.mc-badge--success{background-color:#ebf5de;border-color:#46a610;color:#006902}.mc-badge--warning{background-color:#fdf1e8;border-color:#ea7315;color:#8c3500}.mc-badge--danger{background-color:#fdeaea;border-color:#ea302d;color:#8c0003}.mc-badge--neutral{background-color:#e6e6e6;border-color:#808080;color:#4d4d4d}',this.shadowRoot.appendChild(c),t(this,{target:this.shadowRoot,props:r(this.attributes),customElement:!0},k,x,o,{label:0,type:1},null),e&&(e.target&&s(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["label","type"]}get label(){return this.$$.ctx[0]}set label(e){this.$$set({label:e}),a()}get type(){return this.$$.ctx[1]}set type(e){this.$$set({type:e}),a()}}export{j as default};
+import { S as SvelteElement, i as init, a as attribute_to_object, b as insert, f as flush, s as safe_not_equal, c as assign, e as element, t as text, n as noop, h as set_attributes, j as append, B as action_destroyer, X as set_data_maybe_contenteditable, m as get_spread_update, o as detach, p as compute_rest_props, r as get_current_component, q as exclude_internal_props } from '../../index-c33b3772.js';
+import { c as createEventForwarder } from '../../EventForward-8492ff62.js';
+
+/* src/components/badge/Badge.svelte generated by Svelte v3.58.0 */
+
+function create_fragment(ctx) {
+	let div;
+	let t;
+	let div_class_value;
+	let mounted;
+	let dispose;
+
+	let div_levels = [
+		{
+			class: div_class_value = "" + (setClasses(/*type*/ ctx[1]) + " " + /*userClass*/ ctx[3])
+		},
+		/*attributes*/ ctx[2]
+	];
+
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			t = text(/*label*/ ctx[0]);
+			this.c = noop;
+			set_attributes(div, div_data);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+
+			if (!mounted) {
+				dispose = action_destroyer(/*forwardEvents*/ ctx[4].call(null, div));
+				mounted = true;
+			}
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*label*/ 1) set_data_maybe_contenteditable(t, /*label*/ ctx[0], div_data['contenteditable']);
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*type, userClass*/ 10 && div_class_value !== (div_class_value = "" + (setClasses(/*type*/ ctx[1]) + " " + /*userClass*/ ctx[3])) && { class: div_class_value },
+				dirty & /*attributes*/ 4 && /*attributes*/ ctx[2]
+			]));
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+			mounted = false;
+			dispose();
+		}
+	};
+}
+
+function setClasses(type) {
+	const classes = ['mc-badge'];
+
+	if (type) {
+		classes.push(`mc-badge--${type}`);
+	}
+
+	return classes.join(' ');
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let userClass;
+	let attributes;
+	const omit_props_names = ["label","type"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { label } = $$props;
+	let { type } = $$props;
+	const forwardEvents = createEventForwarder(get_current_component());
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(6, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('label' in $$new_props) $$invalidate(0, label = $$new_props.label);
+		if ('type' in $$new_props) $$invalidate(1, type = $$new_props.type);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(3, userClass = $$props.class);
+		$$invalidate(2, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 4) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+	return [label, type, attributes, userClass, forwardEvents];
+}
+
+class Badge extends SvelteElement {
+	constructor(options) {
+		super();
+		const style = document.createElement('style');
+		style.textContent = `.mc-badge{border-radius:4px;border:1px solid transparent;display:inline-block;padding:0.125rem 0.4375rem;text-transform:lowercase;white-space:nowrap;font-family:"LeroyMerlin", sans-serif;font-weight:600;font-size:0.875rem;line-height:1.2857142857;background-color:#daeff7;border-color:#0b96cc;color:#005c91}.mc-badge::first-letter{text-transform:uppercase}.mc-badge--success{background-color:#ebf5de;border-color:#46a610;color:#006902}.mc-badge--warning{background-color:#fdf1e8;border-color:#ea7315;color:#8c3500}.mc-badge--danger{background-color:#fdeaea;border-color:#ea302d;color:#8c0003}.mc-badge--neutral{background-color:#e6e6e6;border-color:#808080;color:#4d4d4d}`;
+		this.shadowRoot.appendChild(style);
+
+		init(
+			this,
+			{
+				target: this.shadowRoot,
+				props: attribute_to_object(this.attributes),
+				customElement: true
+			},
+			instance,
+			create_fragment,
+			safe_not_equal,
+			{ label: 0, type: 1 },
+			null
+		);
+
+		if (options) {
+			if (options.target) {
+				insert(options.target, this, options.anchor);
+			}
+
+			if (options.props) {
+				this.$set(options.props);
+				flush();
+			}
+		}
+	}
+
+	static get observedAttributes() {
+		return ["label", "type"];
+	}
+
+	get label() {
+		return this.$$.ctx[0];
+	}
+
+	set label(label) {
+		this.$$set({ label });
+		flush();
+	}
+
+	get type() {
+		return this.$$.ctx[1];
+	}
+
+	set type(type) {
+		this.$$set({ type });
+		flush();
+	}
+}
+
+export { Badge as default };
 //# sourceMappingURL=Badge.js.map

package/public/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { BadgeType } from './badge.types';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { get_current_component } from 'svelte/internal';\n  export let label: string;\n  export let type: BadgeType;\n  const forwardEvents = createEventForwarder(get_current_component());\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(type: BadgeType) {\n    const classes = ['mc-badge'];\n\n    if (type) {\n      classes.push(`mc-badge--${type}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div use:forwardEvents class=\"{setClasses(type)} {userClass}\" {...attributes}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.badge';\n</style>\n"],"names":["setClasses","ctx","insert","target","div","anchor","div_data","class","div_class_value","type","classes","push","join","label","$$props","forwardEvents","createEventForwarder","get_current_component","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"gQAwB+BA,EAAWC,EAAI,IAAA,IAAIA,EAAS,IAAOA,EAAU,2EACzEA,EAAK,4BADRC,EAEKC,EAAAC,EAAAC,8DADFJ,EAAK,GAAAK,EAAA,yCADuBN,EAAWC,EAAI,IAAA,IAAIA,EAAS,KAAA,CAAAM,MAAAC,QAAOP,EAAU,uCAXjE,SAAAD,EAAWS,GACZ,MAAAC,GAAW,mBAEbD,GACFC,EAAQC,KAAI,aAAcF,KAGrBC,EAAQE,KAAK,4EAdXC,GAAaC,QACbL,GAAeK,QACpBC,EAAgBC,EAAqBC,qIACxCC,EAAA,EAAAC,EAAYL,EAAQP,WACpBa,EAALC,OAAAC,UAAuBC,yBACXH,EAAWb"}
+{"version":3,"file":"Badge.js","sources":["../../../src/components/badge/Badge.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { BadgeType } from './badge.types';\n  import { createEventForwarder } from '../../utilities/EventForward';\n  import { get_current_component } from 'svelte/internal';\n  export let label: string;\n  export let type: BadgeType;\n  const forwardEvents = createEventForwarder(get_current_component());\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(type: BadgeType) {\n    const classes = ['mc-badge'];\n\n    if (type) {\n      classes.push(`mc-badge--${type}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div use:forwardEvents class=\"{setClasses(type)} {userClass}\" {...attributes}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.badge';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;kCAwB+B,UAAU,UAAC,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA;;iBAAO,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;sBACzE,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;GADR,MAEK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;;;;;;;;;wEADF,GAAK,CAAA,CAAA,CAAA,EAAA,QAAA,CAAA,iBAAA,CAAA,CAAA,CAAA;;;mFADuB,UAAU,UAAC,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA;+CAAO,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;AAXjE,SAAA,UAAU,CAAC,IAAe,EAAA;AAC3B,CAAA,MAAA,OAAO,IAAI,UAAU,CAAA,CAAA;;KAEvB,IAAI,EAAA;EACN,OAAO,CAAC,IAAI,CAAA,CAAA,UAAA,EAAc,IAAI,CAAA,CAAA,CAAA,CAAA;;;QAGzB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;;;;;;;;OAdd,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,IAAe,EAAA,GAAA,OAAA,CAAA;OACpB,aAAa,GAAG,oBAAoB,CAAC,qBAAqB,EAAA,CAAA,CAAA;;;;;;;;;;AAChE,EAAG,YAAA,CAAA,CAAA,EAAA,SAAS,GAAG,OAAO,CAAC,KAAK,CAAA,CAAA;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/public/components/badge/Badge.nested.js

@@ -1,2 +1,102 @@
-import{P as e,i as s,s as r,Q as o,c as a,e as t,t as c,h as l,z as d,b as n,j as i,X as b,m as g,n as f,o as p,p as u,q as m}from"../../index-c33b3772.js";function v(e){o(e,"svelte-g1ids5",'.mc-badge.svelte-g1ids5{border-radius:4px;border:1px solid transparent;display:inline-block;padding:0.125rem 0.4375rem;text-transform:lowercase;white-space:nowrap;font-family:"LeroyMerlin", sans-serif;font-weight:600;font-size:0.875rem;line-height:1.2857142857;background-color:#daeff7;border-color:#0b96cc;color:#005c91}.mc-badge.svelte-g1ids5::first-letter{text-transform:uppercase}.mc-badge--success.svelte-g1ids5{background-color:#ebf5de;border-color:#46a610;color:#006902}.mc-badge--warning.svelte-g1ids5{background-color:#fdf1e8;border-color:#ea7315;color:#8c3500}.mc-badge--danger.svelte-g1ids5{background-color:#fdeaea;border-color:#ea302d;color:#8c0003}.mc-badge--neutral.svelte-g1ids5{background-color:#e6e6e6;border-color:#808080;color:#4d4d4d}')}function y(e){let s,r,o,u=[{class:o=h(e[1])+" "+e[3]},e[2]],m={};for(let e=0;e<u.length;e+=1)m=a(m,u[e]);return{c(){s=t("div"),r=c(e[0]),l(s,m),d(s,"svelte-g1ids5",!0)},m(e,o){n(e,s,o),i(s,r)},p(e,[a]){1&a&&b(r,e[0],m.contenteditable),l(s,m=g(u,[10&a&&o!==(o=h(e[1])+" "+e[3])&&{class:o},4&a&&e[2]])),d(s,"svelte-g1ids5",!0)},i:f,o:f,d(e){e&&p(s)}}}function h(e){const s=["mc-badge"];return e&&s.push(`mc-badge--${e}`),s.join(" ")}function x(e,s,r){let o,t;const c=["label","type"];let l=u(s,c),{label:d}=s,{type:n}=s;return e.$$set=e=>{r(5,s=a(a({},s),m(e))),r(4,l=u(s,c)),"label"in e&&r(0,d=e.label),"type"in e&&r(1,n=e.type)},e.$$.update=()=>{r(3,o=s.class),r(2,t=Object.assign({},l)),4&e.$$.dirty&&delete t.class},s=m(s),[d,n,t,o]}class $ extends e{constructor(e){super(),s(this,e,x,y,r,{label:0,type:1},v)}}export{$ as default};
+import { P as SvelteComponent, i as init, s as safe_not_equal, Q as append_styles, c as assign, e as element, t as text, h as set_attributes, z as toggle_class, b as insert, j as append, X as set_data_maybe_contenteditable, m as get_spread_update, n as noop, o as detach, p as compute_rest_props, q as exclude_internal_props } from '../../index-c33b3772.js';
+
+/* src/components/badge/Badge.nested.svelte generated by Svelte v3.58.0 */
+
+function add_css(target) {
+	append_styles(target, "svelte-g1ids5", ".mc-badge.svelte-g1ids5{border-radius:4px;border:1px solid transparent;display:inline-block;padding:0.125rem 0.4375rem;text-transform:lowercase;white-space:nowrap;font-family:\"LeroyMerlin\", sans-serif;font-weight:600;font-size:0.875rem;line-height:1.2857142857;background-color:#daeff7;border-color:#0b96cc;color:#005c91}.mc-badge.svelte-g1ids5::first-letter{text-transform:uppercase}.mc-badge--success.svelte-g1ids5{background-color:#ebf5de;border-color:#46a610;color:#006902}.mc-badge--warning.svelte-g1ids5{background-color:#fdf1e8;border-color:#ea7315;color:#8c3500}.mc-badge--danger.svelte-g1ids5{background-color:#fdeaea;border-color:#ea302d;color:#8c0003}.mc-badge--neutral.svelte-g1ids5{background-color:#e6e6e6;border-color:#808080;color:#4d4d4d}");
+}
+
+function create_fragment(ctx) {
+	let div;
+	let t;
+	let div_class_value;
+
+	let div_levels = [
+		{
+			class: div_class_value = "" + (setClasses(/*type*/ ctx[1]) + " " + /*userClass*/ ctx[3])
+		},
+		/*attributes*/ ctx[2]
+	];
+
+	let div_data = {};
+
+	for (let i = 0; i < div_levels.length; i += 1) {
+		div_data = assign(div_data, div_levels[i]);
+	}
+
+	return {
+		c() {
+			div = element("div");
+			t = text(/*label*/ ctx[0]);
+			set_attributes(div, div_data);
+			toggle_class(div, "svelte-g1ids5", true);
+		},
+		m(target, anchor) {
+			insert(target, div, anchor);
+			append(div, t);
+		},
+		p(ctx, [dirty]) {
+			if (dirty & /*label*/ 1) set_data_maybe_contenteditable(t, /*label*/ ctx[0], div_data['contenteditable']);
+
+			set_attributes(div, div_data = get_spread_update(div_levels, [
+				dirty & /*type, userClass*/ 10 && div_class_value !== (div_class_value = "" + (setClasses(/*type*/ ctx[1]) + " " + /*userClass*/ ctx[3])) && { class: div_class_value },
+				dirty & /*attributes*/ 4 && /*attributes*/ ctx[2]
+			]));
+
+			toggle_class(div, "svelte-g1ids5", true);
+		},
+		i: noop,
+		o: noop,
+		d(detaching) {
+			if (detaching) detach(div);
+		}
+	};
+}
+
+function setClasses(type) {
+	const classes = ['mc-badge'];
+
+	if (type) {
+		classes.push(`mc-badge--${type}`);
+	}
+
+	return classes.join(' ');
+}
+
+function instance($$self, $$props, $$invalidate) {
+	let userClass;
+	let attributes;
+	const omit_props_names = ["label","type"];
+	let $$restProps = compute_rest_props($$props, omit_props_names);
+	let { label } = $$props;
+	let { type } = $$props;
+
+	$$self.$$set = $$new_props => {
+		$$invalidate(5, $$props = assign(assign({}, $$props), exclude_internal_props($$new_props)));
+		$$invalidate(4, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('label' in $$new_props) $$invalidate(0, label = $$new_props.label);
+		if ('type' in $$new_props) $$invalidate(1, type = $$new_props.type);
+	};
+
+	$$self.$$.update = () => {
+		$$invalidate(3, userClass = $$props.class);
+		$$invalidate(2, attributes = Object.assign({}, $$restProps));
+
+		if ($$self.$$.dirty & /*attributes*/ 4) {
+			delete attributes.class;
+		}
+	};
+
+	$$props = exclude_internal_props($$props);
+	return [label, type, attributes, userClass];
+}
+
+class Badge_nested extends SvelteComponent {
+	constructor(options) {
+		super();
+		init(this, options, instance, create_fragment, safe_not_equal, { label: 0, type: 1 }, add_css);
+	}
+}
+
+export { Badge_nested as default };
 //# sourceMappingURL=Badge.nested.js.map

package/public/components/badge/Badge.nested.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.nested.js","sources":["../../../src/components/badge/Badge.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { BadgeType } from './badge.types';\n\n  export let label: string;\n  export let type: BadgeType;\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(type: BadgeType) {\n    const classes = ['mc-badge'];\n\n    if (type) {\n      classes.push(`mc-badge--${type}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{setClasses(type)} {userClass}\" {...attributes}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.badge';\n</style>\n"],"names":["setClasses","ctx","insert","target","div","anchor","div_data","class","div_class_value","type","classes","push","join","label","$$props","$$invalidate","userClass","attributes","Object","assign","$$restProps"],"mappings":"y9BAuBaA,EAAWC,EAAI,IAAA,IAAIA,EAAS,IAAOA,EAAU,2EACvDA,EAAK,2CADRC,EAEKC,EAAAC,EAAAC,6BADFJ,EAAK,GAAAK,EAAA,yCADKN,EAAWC,EAAI,IAAA,IAAIA,EAAS,KAAA,CAAAM,MAAAC,QAAOP,EAAU,sDAX/C,SAAAD,EAAWS,GACZ,MAAAC,GAAW,mBAEbD,GACFC,EAAQC,KAAI,aAAcF,KAGrBC,EAAQE,KAAK,4EAdXC,GAAaC,QACbL,GAAeK,kIAEvBC,EAAA,EAAAC,EAAYF,EAAQP,WACpBU,EAALC,OAAAC,UAAuBC,yBACXH,EAAWV"}
+{"version":3,"file":"Badge.nested.js","sources":["../../../src/components/badge/Badge.nested.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import type { BadgeType } from './badge.types';\n\n  export let label: string;\n  export let type: BadgeType;\n\n  $: userClass = $$props.class;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function setClasses(type: BadgeType) {\n    const classes = ['mc-badge'];\n\n    if (type) {\n      classes.push(`mc-badge--${type}`);\n    }\n\n    return classes.join(' ');\n  }\n</script>\n\n<div class=\"{setClasses(type)} {userClass}\" {...attributes}>\n  {label}\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import '@mozaic-ds/styles/components/c.badge';\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;;;;;kCAuBa,UAAU,UAAC,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA;;iBAAO,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;sBACvD,GAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;;;GADR,MAEK,CAAA,MAAA,EAAA,GAAA,EAAA,MAAA,CAAA,CAAA;;;;wEADF,GAAK,CAAA,CAAA,CAAA,EAAA,QAAA,CAAA,iBAAA,CAAA,CAAA,CAAA;;;mFADK,UAAU,UAAC,GAAI,CAAA,CAAA,CAAA,CAAA,GAAA,GAAA,iBAAI,GAAS,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,KAAA,EAAA,eAAA,EAAA;+CAAO,GAAU,CAAA,CAAA,CAAA;;;;;;;;;;;;;AAX/C,SAAA,UAAU,CAAC,IAAe,EAAA;AAC3B,CAAA,MAAA,OAAO,IAAI,UAAU,CAAA,CAAA;;KAEvB,IAAI,EAAA;EACN,OAAO,CAAC,IAAI,CAAA,CAAA,UAAA,EAAc,IAAI,CAAA,CAAA,CAAA,CAAA;;;QAGzB,OAAO,CAAC,IAAI,CAAC,GAAG,CAAA,CAAA;;;;;;;;OAdd,KAAa,EAAA,GAAA,OAAA,CAAA;OACb,IAAe,EAAA,GAAA,OAAA,CAAA;;;;;;;;;;AAE1B,EAAG,YAAA,CAAA,CAAA,EAAA,SAAS,GAAG,OAAO,CAAC,KAAK,CAAA,CAAA;AAC5B,kBAAG,UAAU,GAAf,MAAA,CAAA,MAAA,KAAuB,WAAW,CAAA,CAAA,CAAA;;;GAC/B,OAAS,UAAU,CAAC,KAAK,CAAA;;;;;;;;;;;;;;;;;"}

package/public/components/barchart/BarChart.svelte

@@ -140,6 +140,7 @@
         const { left, top, width } = (
           e.target as HTMLElement
         ).getBoundingClientRect();
+        console.log(xSubgroup.bandwidth());
         tooltipData = {
           show: true,
           text: chartEvent.customtooltip
@@ -271,16 +272,14 @@
 </script>
 
 <div bind:this={chart} style="background-color: {backgroundcolor};" />
-
 {#if tooltipData.show}
   <div
     class="tooltip"
-    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px; width: ${tooltipData.width}px;`}
+    style={`top: ${tooltipData.top}px; left: ${tooltipData.left}px;`}
   >
     {tooltipData.text}
   </div>
 {/if}
-
 <div style="height: 0; width: 0;" class="pattern">
   {#each parsedSvgs as svg}
     {@html svg}
@@ -297,7 +296,7 @@
     border-radius: 4px;
     color: $color-grey-000;
     text-align: center;
-    padding: magic-unit-rem(0.5) 0;
+    padding: $mu050 $mu100;
     position: absolute;
   }