@mozaic-ds/web-components 0.7.0 → 0.9.0

package/public/bricoman/components/header/Header.js.map

@@ -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\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\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  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=\"true\"\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}\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.scss';\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","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","hasicons","hasselector","hideoptions","eventHandler","EventHandler","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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"}
+{"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\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  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}\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.scss';\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","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","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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"}

package/public/bricoman/components/header/Header.svelte

@@ -21,7 +21,7 @@
   export let noshadow: boolean | string;
   export let a11ylabels: string | A11yLabels;
   export let scrollcontainer: HTMLElement;
-
+  export let nopaddingbreadcrumb: boolean;
   export let hasicons: boolean;
   export let hasselector: boolean;
   export let hideoptions = false;
@@ -113,7 +113,7 @@
       <div class="mc-header__breadcrumb">
         <Breadcrumb
           items={JSON.stringify(parsedBreadcrumb)}
-          nopadding="true"
+          nopadding={nopaddingbreadcrumb}
           on:link-clicked={(event) =>
             eventHandler.dispatch('link-clicked', event.detail)}
         />

package/public/bricoman/components/kpi/Kpi.js

@@ -0,0 +1,2 @@
+import{S as e,i,a as t,b as c,f as l,s as o,e as r,d as n,t as a,n as p,g as m,j as s,k as d,o as k}from"../../index-c33b3772.js";function u(e){let i,t;return{c(){i=r("span"),t=a(e[3]),m(i,"class","mc-kpi__label")},m(e,l){c(e,i,l),s(i,t)},p(e,i){8&i&&d(t,e[3])},d(e){e&&k(i)}}}function b(e){let i,t;return{c(){i=r("span"),t=a(e[3]),m(i,"class","mc-kpi__label")},m(e,l){c(e,i,l),s(i,t)},p(e,i){8&i&&d(t,e[3])},d(e){e&&k(i)}}}function x(e){let i,t,l=e[5]&&g(e),o=e[1]&&f(e);return{c(){i=r("div"),l&&l.c(),t=n(),o&&o.c(),m(i,"class","mc-kpi__aside")},m(e,r){c(e,i,r),l&&l.m(i,null),s(i,t),o&&o.m(i,null)},p(e,c){e[5]?l?l.p(e,c):(l=g(e),l.c(),l.m(i,t)):l&&(l.d(1),l=null),e[1]?o?o.p(e,c):(o=f(e),o.c(),o.m(i,null)):o&&(o.d(1),o=null)},d(e){e&&k(i),l&&l.d(),o&&o.d()}}}function g(e){let i,t;return{c(){i=r("span"),t=a(e[5]),m(i,"class","mc-kpi__detail")},m(e,l){c(e,i,l),s(i,t)},p(e,i){32&i&&d(t,e[5])},d(e){e&&k(i)}}}function f(e){let i,t=`<${h(e[1],e[2])} />`;return{c(){i=r("span"),m(i,"class","mc-kpi__icon")},m(e,l){c(e,i,l),i.innerHTML=t},p(e,c){6&c&&t!==(t=`<${h(e[1],e[2])} />`)&&(i.innerHTML=t)},d(e){e&&k(i)}}}function _(e){let i,t,l,o,g,f,_,h,$,v=e[7]&&u(e),y=!e[7]&&b(e),w=(e[1]||e[5])&&x(e);return{c(){i=r("div"),v&&v.c(),t=n(),l=r("div"),o=r("div"),y&&y.c(),g=n(),f=r("span"),_=a(e[0]),h=n(),w&&w.c(),this.c=p,m(f,"class","mc-kpi__value"),m(o,"class","mc-kpi__main"),m(l,"class","mc-kpi__content"),m(i,"class",$="mc-kpi mc-kpi--"+e[6]()+" mc-kpi--"+e[4])},m(e,r){c(e,i,r),v&&v.m(i,null),s(i,t),s(i,l),s(l,o),y&&y.m(o,null),s(o,g),s(o,f),s(f,_),s(l,h),w&&w.m(l,null)},p(e,[c]){e[7]?v?v.p(e,c):(v=u(e),v.c(),v.m(i,t)):v&&(v.d(1),v=null),e[7]?y&&(y.d(1),y=null):y?y.p(e,c):(y=b(e),y.c(),y.m(o,g)),1&c&&d(_,e[0]),e[1]||e[5]?w?w.p(e,c):(w=x(e),w.c(),w.m(l,null)):w&&(w.d(1),w=null),80&c&&$!==($="mc-kpi mc-kpi--"+e[6]()+" mc-kpi--"+e[4])&&m(i,"class",$)},i:p,o:p,d(e){e&&k(i),v&&v.d(),y&&y.d(),w&&w.d()}}}function h(e,i){return i?`${e}  fill="${i}"`:`${e}`}function $(e,i,t){let c,l,{value:o=""}=i,{iconname:r=""}=i,{iconcolor:n=""}=i,{label:a=""}=i,{type:p=""}=i,{detail:m=""}=i;return e.$$set=e=>{"value"in e&&t(0,o=e.value),"iconname"in e&&t(1,r=e.iconname),"iconcolor"in e&&t(2,n=e.iconcolor),"label"in e&&t(3,a=e.label),"type"in e&&t(4,p=e.type),"detail"in e&&t(5,m=e.detail)},e.$$.update=()=>{40&e.$$.dirty&&t(6,l=function(){let e="small";return a&&a.length>0&&!m?e="medium":m&&m.length>0&&(e="large"),e}),72&e.$$.dirty&&t(7,c=a&&a.length>0&&"large"!==l())},[o,r,n,a,p,m,l,c]}class v extends e{constructor(e){super();const r=document.createElement("style");r.textContent=".mc-kpi{color:var(--color-kpi-text, #005c91);display:inline-block}.mc-kpi__label{font-size:1.2rem;display:block}.mc-kpi__content{display:-webkit-box;display:-ms-flexbox;display:flex}.mc-kpi__main{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__value{font-size:1.2rem;font-weight:600}.mc-kpi__aside{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--color-grey-000, #ffffff);color:var(--color-font-dark, #000000);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-kpi__detail{font-size:1.2rem}.mc-kpi__icon{display:block;height:16px;width:16px}.mc-kpi--small .mc-kpi__label{font-size:1rem;margin-bottom:6px;color:var(--color-grey-999, #999999)}.mc-kpi--small .mc-kpi__content{gap:0.5rem}.mc-kpi--small .mc-kpi__value{font-size:0.875rem;line-height:1.2}.mc-kpi--small .mc-kpi__main{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;padding:3px 7px}.mc-kpi--small .mc-kpi__aside{background-color:transparent}.mc-kpi--medium .mc-kpi__label{color:var(--color-grey-999, #999999);margin-bottom:6px}.mc-kpi--medium .mc-kpi__content{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden;height:40px;min-width:160px}.mc-kpi--medium .mc-kpi__main{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:2px 2px 2px 7px}.mc-kpi--medium .mc-kpi__value{font-size:1.5rem}.mc-kpi--medium .mc-kpi__aside{padding-left:12px;padding-right:15px}.mc-kpi--large{background-color:var(--color-kpi-background, #daeff7);border:1px solid var(--color-kpi-border, #007bb4);border-radius:4px;overflow:hidden}.mc-kpi--large .mc-kpi__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-width:160px;min-height:100px}.mc-kpi--large .mc-kpi__main{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:10px 15px;min-height:5rem}.mc-kpi--large .mc-kpi__label{line-height:1.5;font-size:1rem}.mc-kpi--large .mc-kpi__value{font-size:2rem}.mc-kpi--large .mc-kpi__detail{font-size:1rem;line-height:1}.mc-kpi--large .mc-kpi__aside{min-height:3rem;padding-right:15px;padding-left:15px;gap:12px}.mc-kpi--information{--color-kpi-background:#daeff7;--color-kpi-border:#007bb4;--color-kpi-text:#005c91}.mc-kpi--warning{--color-kpi-background:#fdf1e8;--color-kpi-border:#c65200;--color-kpi-text:#8c3500}.mc-kpi--danger{--color-kpi-background:#fdeaea;--color-kpi-border:#c61112;--color-kpi-text:#8c0003}.mc-kpi--success{--color-kpi-background:#ebf5de;--color-kpi-border:#188803;--color-kpi-text:#006902}.mc-kpi--neutral{--color-kpi-background:#e6e6e6;--color-kpi-border:#666666;--color-kpi-text:#4d4d4d}",this.shadowRoot.appendChild(r),i(this,{target:this.shadowRoot,props:t(this.attributes),customElement:!0},$,_,o,{value:0,iconname:1,iconcolor:2,label:3,type:4,detail:5},null),e&&(e.target&&c(e.target,this,e.anchor),e.props&&(this.$set(e.props),l()))}static get observedAttributes(){return["value","iconname","iconcolor","label","type","detail"]}get value(){return this.$$.ctx[0]}set value(e){this.$$set({value:e}),l()}get iconname(){return this.$$.ctx[1]}set iconname(e){this.$$set({iconname:e}),l()}get iconcolor(){return this.$$.ctx[2]}set iconcolor(e){this.$$set({iconcolor:e}),l()}get label(){return this.$$.ctx[3]}set label(e){this.$$set({label:e}),l()}get type(){return this.$$.ctx[4]}set type(e){this.$$set({type:e}),l()}get detail(){return this.$$.ctx[5]}set detail(e){this.$$set({detail:e}),l()}}export{v as default};
+//# sourceMappingURL=Kpi.js.map

package/public/bricoman/components/kpi/Kpi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kpi.js","sources":["../../../../src/components/kpi/Kpi.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  export let value: string = '';\n  export let iconname: string = '';\n  export let iconcolor: string = '';\n  export let label: string = '';\n  export let type: string = '';\n  export let detail: string = '';\n  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';\n  $: size = function getSize() {\n    let size = 'small';\n    if (label && label.length > 0 && !detail) {\n      size = 'medium';\n    } else if (detail && detail.length > 0) {\n      size = 'large';\n    }\n\n    return size;\n  };\n\n  function generateIconName(iconname: string, iconcolor?: string): string {\n    return iconcolor ? `${iconname}  fill=\"${iconcolor}\"` : `${iconname}`;\n  }\n</script>\n\n<div class=\"mc-kpi mc-kpi--{size()} mc-kpi--{type}\">\n  {#if labelOutsideContent}\n    <span class=\"mc-kpi__label\">{label}</span>\n  {/if}\n  <div class=\"mc-kpi__content\">\n    <div class=\"mc-kpi__main\">\n      {#if !labelOutsideContent}\n        <span class=\"mc-kpi__label\">{label}</span>\n      {/if}\n      <span class=\"mc-kpi__value\">{value}</span>\n    </div>\n    {#if iconname || detail}\n      <div class=\"mc-kpi__aside\">\n        {#if detail}\n          <span class=\"mc-kpi__detail\">{detail}</span>\n        {/if}\n        {#if iconname}\n          <span class=\"mc-kpi__icon\"\n            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span\n          >\n        {/if}\n      </div>\n    {/if}\n  </div>\n</div>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  .mc-kpi {\n    color: var(--color-kpi-text, #005c91);\n    display: inline-block;\n\n    &__label {\n      font-size: 1.2rem;\n      display: block;\n    }\n\n    &__content {\n      display: flex;\n    }\n\n    &__main {\n      align-items: center;\n      display: flex;\n      justify-content: center;\n    }\n\n    &__value {\n      font-size: 1.2rem;\n      font-weight: 600;\n    }\n\n    &__aside {\n      align-items: center;\n      background-color: var(--color-grey-000, #ffffff);\n      color: var(--color-font-dark, #000000);\n      display: flex;\n      justify-content: center;\n    }\n\n    &__detail {\n      font-size: 1.2rem;\n    }\n\n    &__icon {\n      display: block;\n      height: 16px;\n      width: 16px;\n    }\n\n    &--small {\n      .mc-kpi {\n        &__label {\n          font-size: 1rem;\n          margin-bottom: 6px;\n          color: var(--color-grey-999, #999999);\n        }\n\n        &__content {\n          gap: 0.5rem;\n        }\n\n        &__value {\n          font-size: 0.875rem;\n          line-height: 1.2;\n        }\n\n        &__main {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          padding: 3px 7px;\n        }\n\n        &__aside {\n          background-color: transparent;\n        }\n      }\n    }\n\n    &--medium {\n      .mc-kpi {\n        &__label {\n          color: var(--color-grey-999, #999999);\n          margin-bottom: 6px;\n        }\n\n        &__content {\n          background-color: var(--color-kpi-background, #daeff7);\n          border: 1px solid var(--color-kpi-border, #007bb4);\n          border-radius: 4px;\n          overflow: hidden;\n          height: 40px;\n          min-width: 160px;\n        }\n\n        &__main {\n          flex-grow: 1;\n          padding: 2px 2px 2px 7px;\n        }\n\n        &__value {\n          font-size: 1.5rem;\n        }\n\n        &__aside {\n          padding-left: 12px;\n          padding-right: 15px;\n        }\n      }\n    }\n\n    &--large {\n      background-color: var(--color-kpi-background, #daeff7);\n      border: 1px solid var(--color-kpi-border, #007bb4);\n      border-radius: 4px;\n      overflow: hidden;\n\n      .mc-kpi {\n        &__content {\n          flex-direction: column;\n          min-width: 160px;\n          min-height: 100px;\n        }\n\n        &__main {\n          flex-direction: column;\n          padding: 10px 15px;\n          min-height: 5rem;\n        }\n\n        &__label {\n          line-height: 1.5;\n          font-size: 1rem;\n        }\n\n        &__value {\n          font-size: 2rem;\n        }\n\n        &__detail {\n          font-size: 1rem;\n          line-height: 1;\n        }\n\n        &__aside {\n          min-height: 3rem;\n          padding-right: 15px;\n          padding-left: 15px;\n          gap: 12px;\n        }\n      }\n    }\n\n    &--information {\n      --color-kpi-background: #daeff7;\n      --color-kpi-border: #007bb4;\n      --color-kpi-text: #005c91;\n    }\n\n    &--warning {\n      --color-kpi-background: #fdf1e8;\n      --color-kpi-border: #c65200;\n      --color-kpi-text: #8c3500;\n    }\n\n    &--danger {\n      --color-kpi-background: #fdeaea;\n      --color-kpi-border: #c61112;\n      --color-kpi-text: #8c0003;\n    }\n\n    &--success {\n      --color-kpi-background: #ebf5de;\n      --color-kpi-border: #188803;\n      --color-kpi-text: #006902;\n    }\n\n    &--neutral {\n      --color-kpi-background: #e6e6e6;\n      --color-kpi-border: #666666;\n      --color-kpi-text: #4d4d4d;\n    }\n  }\n</style>\n"],"names":["ctx","insert","target","span","anchor","create_if_block_2","create_if_block_1","div","generateIconName","innerHTML","raw_value","create_if_block_4","create_if_block_3","if_block2","create_if_block","attr","div2","div2_class_value","append","div1","div0","dirty","iconname","iconcolor","value","$$props","label","type","detail","$$invalidate","size","length","labelOutsideContent"],"mappings":"mLA4BiCA,EAAK,yCAAlCC,EAAyCC,EAAAC,EAAAC,2BAAZJ,EAAK,qEAKDA,EAAK,yCAAlCC,EAAyCC,EAAAC,EAAAC,2BAAZJ,EAAK,4CAM7BA,EAAM,IAAAK,EAAAL,KAGNA,EAAQ,IAAAM,EAAAN,sFAJfC,EASKC,EAAAK,EAAAH,gDAREJ,EAAM,yDAGNA,EAAQ,+IAFmBA,EAAM,0CAApCC,EAA2CC,EAAAC,EAAAC,4BAAbJ,EAAM,8CAItBQ,EAAiBR,EAAQ,GAAEA,EAAS,oEADlDC,EAEAC,EAAAC,EAAAC,yCADcI,EAAiBR,EAAQ,GAAEA,EAAS,YAAAG,EAAAM,UAAAC,yDAjBrDV,EAAmB,IAAAW,EAAAX,MAKdA,EAAmB,IAAAY,EAAAZ,GAKtBa,GAAAb,MAAYA,EAAM,KAAAc,EAAAd,6FAFQA,EAAK,oHATZe,EAAAC,EAAA,QAAAC,EAAA,kBAAAjB,mBAAiBA,EAAI,YAAjDC,EAwBKC,EAAAc,EAAAZ,yBApBHc,EAmBKF,EAAAG,GAlBHD,EAKKC,EAAAC,yBADHF,EAAyCE,EAAAjB,0CARxCH,EAAmB,yDAKdA,EAAmB,kEAGIA,EAAK,IAE/BA,MAAYA,EAAM,4DAXC,GAAAqB,GAAAJ,KAAAA,EAAA,kBAAAjB,mBAAiBA,EAAI,gFALtCQ,EAAiBc,EAAkBC,UACnCA,EAAe,GAAAD,YAAmBC,QAAkBD,+BAnBlDE,MAAAA,EAAgB,IAAEC,GAClBH,SAAAA,EAAmB,IAAEG,GACrBF,UAAAA,EAAoB,IAAEE,GACtBC,MAAAA,EAAgB,IAAED,GAClBE,KAAAA,EAAe,IAAEF,GACjBG,OAAAA,EAAiB,IAAEH,4OAE7BI,EAAA,EAAEC,EAAI,WACD,IAAAA,EAAO,eACPJ,GAASA,EAAMK,OAAS,IAAMH,EAChCE,EAAO,SACEF,GAAUA,EAAOG,OAAS,IACnCD,EAAO,SAGFA,mBATND,EAAA,EAAAG,EAAsBN,GAASA,EAAMK,OAAS,GAAgB,UAAXD"}

package/public/bricoman/components/kpi/Kpi.svelte

@@ -0,0 +1,232 @@
+<svelte:options tag={null} />
+
+<script lang="ts">
+  export let value: string = '';
+  export let iconname: string = '';
+  export let iconcolor: string = '';
+  export let label: string = '';
+  export let type: string = '';
+  export let detail: string = '';
+  $: labelOutsideContent = label && label.length > 0 && size() !== 'large';
+  $: size = function getSize() {
+    let size = 'small';
+    if (label && label.length > 0 && !detail) {
+      size = 'medium';
+    } else if (detail && detail.length > 0) {
+      size = 'large';
+    }
+
+    return size;
+  };
+
+  function generateIconName(iconname: string, iconcolor?: string): string {
+    return iconcolor ? `${iconname}  fill="${iconcolor}"` : `${iconname}`;
+  }
+</script>
+
+<div class="mc-kpi mc-kpi--{size()} mc-kpi--{type}">
+  {#if labelOutsideContent}
+    <span class="mc-kpi__label">{label}</span>
+  {/if}
+  <div class="mc-kpi__content">
+    <div class="mc-kpi__main">
+      {#if !labelOutsideContent}
+        <span class="mc-kpi__label">{label}</span>
+      {/if}
+      <span class="mc-kpi__value">{value}</span>
+    </div>
+    {#if iconname || detail}
+      <div class="mc-kpi__aside">
+        {#if detail}
+          <span class="mc-kpi__detail">{detail}</span>
+        {/if}
+        {#if iconname}
+          <span class="mc-kpi__icon"
+            >{@html `<${generateIconName(iconname, iconcolor)} />`}</span
+          >
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  @import '@mozaic-ds/styles/settings-tools/_all-settings';
+  .mc-kpi {
+    color: var(--color-kpi-text, #005c91);
+    display: inline-block;
+
+    &__label {
+      font-size: 1.2rem;
+      display: block;
+    }
+
+    &__content {
+      display: flex;
+    }
+
+    &__main {
+      align-items: center;
+      display: flex;
+      justify-content: center;
+    }
+
+    &__value {
+      font-size: 1.2rem;
+      font-weight: 600;
+    }
+
+    &__aside {
+      align-items: center;
+      background-color: var(--color-grey-000, #ffffff);
+      color: var(--color-font-dark, #000000);
+      display: flex;
+      justify-content: center;
+    }
+
+    &__detail {
+      font-size: 1.2rem;
+    }
+
+    &__icon {
+      display: block;
+      height: 16px;
+      width: 16px;
+    }
+
+    &--small {
+      .mc-kpi {
+        &__label {
+          font-size: 1rem;
+          margin-bottom: 6px;
+          color: var(--color-grey-999, #999999);
+        }
+
+        &__content {
+          gap: 0.5rem;
+        }
+
+        &__value {
+          font-size: 0.875rem;
+          line-height: 1.2;
+        }
+
+        &__main {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          padding: 3px 7px;
+        }
+
+        &__aside {
+          background-color: transparent;
+        }
+      }
+    }
+
+    &--medium {
+      .mc-kpi {
+        &__label {
+          color: var(--color-grey-999, #999999);
+          margin-bottom: 6px;
+        }
+
+        &__content {
+          background-color: var(--color-kpi-background, #daeff7);
+          border: 1px solid var(--color-kpi-border, #007bb4);
+          border-radius: 4px;
+          overflow: hidden;
+          height: 40px;
+          min-width: 160px;
+        }
+
+        &__main {
+          flex-grow: 1;
+          padding: 2px 2px 2px 7px;
+        }
+
+        &__value {
+          font-size: 1.5rem;
+        }
+
+        &__aside {
+          padding-left: 12px;
+          padding-right: 15px;
+        }
+      }
+    }
+
+    &--large {
+      background-color: var(--color-kpi-background, #daeff7);
+      border: 1px solid var(--color-kpi-border, #007bb4);
+      border-radius: 4px;
+      overflow: hidden;
+
+      .mc-kpi {
+        &__content {
+          flex-direction: column;
+          min-width: 160px;
+          min-height: 100px;
+        }
+
+        &__main {
+          flex-direction: column;
+          padding: 10px 15px;
+          min-height: 5rem;
+        }
+
+        &__label {
+          line-height: 1.5;
+          font-size: 1rem;
+        }
+
+        &__value {
+          font-size: 2rem;
+        }
+
+        &__detail {
+          font-size: 1rem;
+          line-height: 1;
+        }
+
+        &__aside {
+          min-height: 3rem;
+          padding-right: 15px;
+          padding-left: 15px;
+          gap: 12px;
+        }
+      }
+    }
+
+    &--information {
+      --color-kpi-background: #daeff7;
+      --color-kpi-border: #007bb4;
+      --color-kpi-text: #005c91;
+    }
+
+    &--warning {
+      --color-kpi-background: #fdf1e8;
+      --color-kpi-border: #c65200;
+      --color-kpi-text: #8c3500;
+    }
+
+    &--danger {
+      --color-kpi-background: #fdeaea;
+      --color-kpi-border: #c61112;
+      --color-kpi-text: #8c0003;
+    }
+
+    &--success {
+      --color-kpi-background: #ebf5de;
+      --color-kpi-border: #188803;
+      --color-kpi-text: #006902;
+    }
+
+    &--neutral {
+      --color-kpi-background: #e6e6e6;
+      --color-kpi-border: #666666;
+      --color-kpi-text: #4d4d4d;
+    }
+  }
+</style>

package/public/bricoman/components/sidebar/Sidebar.js

@@ -1,2 +1,2 @@
-import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:10;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#ffe1d1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#ff7933}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
+import{S as e,i as t,a as s,b as i,f as a,s as r,c as n,e as o,d as l,x as d,n as c,g as m,h as b,j as u,A as g,l as p,C as f,D as h,E as _,m as $,o as x,G as w,p as y,ab as v,ac as E,q as L,M as k,J as j,ad as T,T as I}from"../../index-c33b3772.js";import S from"./sidebar-segment.nested.js";import U from"./sidebar-section.nested.js";import z from"./sidebar-user.nested.js";import R from"./sidebar-separator.nested.js";import{E as A}from"../../EventHandler-02058705.js";import{i as O,s as B,t as C,u as M,a as F,b as H}from"../../sidebar-service-275bf9ef.js";import"./sidebar-feature-group.nested.js";import"./sidebar-feature.nested.js";import"./sidebar-sub-features.nested.js";const{Boolean:J}=T;function q(e,t,s){const i=e.slice();return i[18]=t[s],i}function D(e,t,s){const i=e.slice();return i[21]=t[s],i}function G(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function N(e){let t,s;return{c(){t=I("svg"),s=I("path"),m(s,"d","M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z"),m(t,"class","mc-sidebar__trigger-icon"),m(t,"width","24px"),m(t,"height","24px"),m(t,"viewBox","0 0 24 24")},m(e,a){i(e,t,a),u(t,s)},d(e){e&&x(t)}}}function K(e){let t,s,a=e[4]?.UTILITIES,r=[];for(let t=0;t<a.length;t+=1)r[t]=Q(q(e,a,t));const n=e=>h(r[e],1,1,(()=>{r[e]=null}));return{c(){t=o("div");for(let e=0;e<r.length;e+=1)r[e].c();m(t,"class","mc-sidebar__utilities")},m(e,a){i(e,t,a);for(let e=0;e<r.length;e+=1)r[e]&&r[e].m(t,null);s=!0},p(e,s){if(16&s){let i;for(a=e[4]?.UTILITIES,i=0;i<a.length;i+=1){const n=q(e,a,i);r[i]?(r[i].p(n,s),f(r[i],1)):(r[i]=Q(n),r[i].c(),f(r[i],1),r[i].m(t,null))}for(k(),i=a.length;i<r.length;i+=1)n(i);_()}},i(e){if(!s){for(let e=0;e<a.length;e+=1)f(r[e]);s=!0}},o(e){r=r.filter(J);for(let e=0;e<r.length;e+=1)h(r[e]);s=!1},d(e){e&&x(t),j(r,e)}}}function P(e){let t,s,a;return s=new S({props:{data:e[21]}}),{c(){t=o("li"),d(s.$$.fragment),m(t,"class","mc-sidebar__utilities__item")},m(e,r){i(e,t,r),g(s,t,null),a=!0},p(e,t){const i={};16&t&&(i.data=e[21]),s.$set(i)},i(e){a||(f(s.$$.fragment,e),a=!0)},o(e){h(s.$$.fragment,e),a=!1},d(e){e&&x(t),w(s)}}}function Q(e){let t,s,a,r,n;t=new R({});let c=e[18],m=[];for(let t=0;t<c.length;t+=1)m[t]=P(D(e,c,t));const b=e=>h(m[e],1,1,(()=>{m[e]=null}));return{c(){d(t.$$.fragment),s=l(),a=o("ul");for(let e=0;e<m.length;e+=1)m[e].c();r=l()},m(e,o){g(t,e,o),i(e,s,o),i(e,a,o);for(let e=0;e<m.length;e+=1)m[e]&&m[e].m(a,null);u(a,r),n=!0},p(e,t){if(16&t){let s;for(c=e[18],s=0;s<c.length;s+=1){const i=D(e,c,s);m[s]?(m[s].p(i,t),f(m[s],1)):(m[s]=P(i),m[s].c(),f(m[s],1),m[s].m(a,r))}for(k(),s=c.length;s<m.length;s+=1)b(s);_()}},i(e){if(!n){f(t.$$.fragment,e);for(let e=0;e<c.length;e+=1)f(m[e]);n=!0}},o(e){h(t.$$.fragment,e),m=m.filter(J);for(let e=0;e<m.length;e+=1)h(m[e]);n=!1},d(e){w(t,e),e&&x(s),e&&x(a),j(m,e)}}}function V(e){let t,s;return t=new z({props:{user:e[2],data:e[4]?.USER_FEATURES,a11yLabels:e[0]}}),{c(){d(t.$$.fragment)},m(e,i){g(t,e,i),s=!0},p(e,s){const i={};4&s&&(i.user=e[2]),16&s&&(i.data=e[4]?.USER_FEATURES),1&s&&(i.a11yLabels=e[0]),t.$set(i)},i(e){s||(f(t.$$.fragment,e),s=!0)},o(e){h(t.$$.fragment,e),s=!1},d(e){w(t,e)}}}function W(e){let t,s,a,r,y,v,E,L,j,T,I,z,A,O,B,C,M,F;function H(e,t){return e[3]?N:G}let J=H(e),q=J(e);E=new S({props:{data:e[4]?.HOME}}),j=new R({}),I=new U({props:{data:e[4]?.FEATURES,a11yLabels:e[0]}});let D=e[4]?.UTILITIES&&K(e),P=e[2]&&V(e),Q=[{class:B="mc-sidebar "+(e[3]?"is-open":"is-close")},{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},e[1]],W={};for(let e=0;e<Q.length;e+=1)W=n(W,Q[e]);return{c(){t=o("nav"),s=o("div"),a=o("button"),r=o("span"),q.c(),v=l(),d(E.$$.fragment),L=l(),d(j.$$.fragment),T=l(),d(I.$$.fragment),z=l(),D&&D.c(),O=l(),P&&P.c(),this.c=c,m(r,"class","mc-sidebar__trigger__container"),m(a,"id","mc-sidebar__trigger"),m(a,"class","mc-sidebar__trigger"),m(a,"aria-label",y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"),m(s,"class",A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")),b(t,W)},m(n,o){i(n,t,o),u(t,s),u(s,a),u(a,r),q.m(r,null),u(s,v),g(E,s,null),u(s,L),g(j,s,null),u(s,T),g(I,s,null),u(s,z),D&&D.m(s,null),u(t,O),P&&P.m(t,null),C=!0,M||(F=p(a,"click",e[9]),M=!0)},p(e,[i]){J!==(J=H(e))&&(q.d(1),q=J(e),q&&(q.c(),q.m(r,null))),(!C||9&i&&y!==(y=e[3]?e[0]?.close||"Close the sidebar":e[0]?.open||"Open the sidebar"))&&m(a,"aria-label",y);const n={};16&i&&(n.data=e[4]?.HOME),E.$set(n);const o={};16&i&&(o.data=e[4]?.FEATURES),1&i&&(o.a11yLabels=e[0]),I.$set(o),e[4]?.UTILITIES?D?(D.p(e,i),16&i&&f(D,1)):(D=K(e),D.c(),f(D,1),D.m(s,null)):D&&(k(),h(D,1,1,(()=>{D=null})),_()),(!C||4&i&&A!==(A="mc-sidebar__container "+(e[2]?"has-bottom-panel":"")))&&m(s,"class",A),e[2]?P?(P.p(e,i),4&i&&f(P,1)):(P=V(e),P.c(),f(P,1),P.m(t,null)):P&&(k(),h(P,1,1,(()=>{P=null})),_()),b(t,W=$(Q,[(!C||8&i&&B!==(B="mc-sidebar "+(e[3]?"is-open":"is-close")))&&{class:B},(!C||8&i)&&{"aria-expanded":e[3]},{"aria-labelledby":"mc-sidebar__trigger"},2&i&&e[1]]))},i(e){C||(f(E.$$.fragment,e),f(j.$$.fragment,e),f(I.$$.fragment,e),f(D),f(P),C=!0)},o(e){h(E.$$.fragment,e),h(j.$$.fragment,e),h(I.$$.fragment,e),h(D),h(P),C=!1},d(e){e&&x(t),q.d(),w(E),w(j),w(I),D&&D.d(),P&&P.d(),M=!1,F()}}}function X(e,t,s){let i;const a=["data","open","code","user","a11yLabels"];let r,o,l=y(t,a);v(e,O,(e=>s(3,r=e))),v(e,H,(e=>s(4,o=e)));let d,c,m,{data:b}=t,{open:u}=t,{code:g}=t,{user:p}=t,{a11yLabels:f}=t,h=new A,_=!1;const $=[];$.push(O.subscribe((e=>{h.dispatch("on-toggle",e)}))),$.push(B.subscribe((e=>{var t,s,i,a,r;e&&(C(!1),h.dispatch("on-select",null!==(a=null!==(s=null===(t=e.lv2)||void 0===t?void 0:t.code)&&void 0!==s?s:null===(i=e.lv1)||void 0===i?void 0:i.code)&&void 0!==a?a:null===(r=e.lv0)||void 0===r?void 0:r.code))}))),E((()=>{for(const e of $)e()}));return e.$$set=e=>{t=n(n({},t),L(e)),s(17,l=y(t,a)),"data"in e&&s(5,b=e.data),"open"in e&&s(6,u=e.open),"code"in e&&s(7,g=e.code),"user"in e&&s(8,p=e.user),"a11yLabels"in e&&s(0,f=e.a11yLabels)},e.$$.update=()=>{var t,a,r;160&e.$$.dirty&&(t=g,typeof m==typeof(a=b)&&m===a||(m=a,M(a)),typeof c==typeof t&&c===t||(c=t,F(t))),64&e.$$.dirty&&(typeof _==typeof(r=u)&&_===r||(_=Boolean(r),C(Boolean(r)))),256&e.$$.dirty&&s(2,d="string"==typeof p?JSON.parse(p):p),s(1,i=Object.assign({},l)),2&e.$$.dirty&&delete i.class},[f,i,d,r,o,b,u,g,p,()=>C()]}class Y extends e{constructor(e){super();const n=document.createElement("style");n.textContent=".mc-sidebar{position:absolute;top:0;left:0;z-index:100;font-size:14px;color:white;-webkit-box-sizing:border-box;box-sizing:border-box;fill:#191919;width:320px;background:#ffe1d1;display:block;height:100vh}.mc-sidebar__container{height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.mc-sidebar__container.has-bottom-panel{height:calc(100% - 88px)}.mc-sidebar__utilities{margin-bottom:24px}.mc-sidebar__utilities__item{margin:4px 0px}.mc-sidebar__utilities__item:first-child{margin-top:0}.mc-sidebar__utilities__item:last-child{margin-bottom:0}.mc-sidebar__trigger{cursor:pointer;background:none;border:none;padding:0;margin:28px 0;min-height:38px;width:100%;font-size:inherit;font-family:inherit}.mc-sidebar__trigger-icon{fill:#191919}.mc-sidebar__trigger__container{height:38px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.mc-sidebar__trigger__container>*{width:24px;height:24px}.mc-sidebar__trigger:hover .mc-sidebar__trigger__container{background:#ff7933}.mc-sidebar__trigger:focus-visible{-webkit-box-shadow:none;box-shadow:none;border:none;outline:none}.mc-sidebar__trigger:focus-visible .mc-sidebar__trigger__container{-webkit-box-shadow:none;box-shadow:none;border:none;border-radius:6px;outline:1px solid #0b96cc}.mc-sidebar.is-open{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out}.mc-sidebar.is-open .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:266px;width:38px;border-radius:4px}.mc-sidebar.is-close{-o-transition:width 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out;transition:width 300ms ease-in-out;width:64px;padding:0}.mc-sidebar.is-close .mc-sidebar__trigger__container{-o-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;-webkit-transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;transition:width 300ms ease-in-out, margin-left 300ms ease-in-out, border-radius 300ms ease-in-out;margin-left:0px;width:64px;border-radius:0px}.mc-sidebar ul{list-style-type:none;margin:0;padding:0}",this.shadowRoot.appendChild(n),t(this,{target:this.shadowRoot,props:s(this.attributes),customElement:!0},X,W,r,{data:5,open:6,code:7,user:8,a11yLabels:0},null),e&&(e.target&&i(e.target,this,e.anchor),e.props&&(this.$set(e.props),a()))}static get observedAttributes(){return["data","open","code","user","a11yLabels"]}get data(){return this.$$.ctx[5]}set data(e){this.$$set({data:e}),a()}get open(){return this.$$.ctx[6]}set open(e){this.$$set({open:e}),a()}get code(){return this.$$.ctx[7]}set code(e){this.$$set({code:e}),a()}get user(){return this.$$.ctx[8]}set user(e){this.$$set({user:e}),a()}get a11yLabels(){return this.$$.ctx[0]}set a11yLabels(e){this.$$set({a11yLabels:e}),a()}}export{Y as default};
 //# sourceMappingURL=Sidebar.js.map

package/public/bricoman/components/sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import Segment from './sidebar-segment.nested.svelte';\n  import Section from './sidebar-section.nested.svelte';\n  import NavigationUser from './sidebar-user.nested.svelte';\n  import NavigationSeparator from './sidebar-separator.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    selectFeature,\n    updateSidebarData,\n    toggleSidebar,\n    isSidebarOpen,\n    sidebar,\n    selectedFeature,\n  } from './sidebar-service';\n  import type { Unsubscriber } from 'svelte/store';\n  import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n  export let data: string | Sidebar;\n  export let open: boolean;\n  export let code: string;\n  export let user: string | User;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler();\n  let parsedUser: User;\n  let previousCode: string;\n  let previousData: string | Sidebar;\n  let previousOpen = false;\n\n  $: updateData(code, data);\n  $: updateOpen(open);\n  $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function updateData(newCode: string, newData: string | Sidebar) {\n    if (typeof previousData !== typeof newData || previousData !== newData) {\n      previousData = newData;\n      updateSidebarData(newData);\n    }\n    if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n      previousCode = newCode;\n      selectFeature(newCode);\n    }\n  }\n\n  function updateOpen(newOpenStatus?: boolean) {\n    if (\n      typeof previousOpen !== typeof newOpenStatus ||\n      previousOpen !== newOpenStatus\n    ) {\n      previousOpen = Boolean(newOpenStatus);\n      toggleSidebar(Boolean(newOpenStatus));\n    }\n  }\n\n  const unsubscribes: Unsubscriber[] = [];\n  unsubscribes.push(\n    isSidebarOpen.subscribe((state) => {\n      eventHandler.dispatch('on-toggle', state);\n    }),\n  );\n\n  unsubscribes.push(\n    selectedFeature.subscribe((selection) => {\n      // Emit an event and close the menu when the selection changes.\n      if (selection) {\n        toggleSidebar(false);\n        eventHandler.dispatch(\n          'on-select',\n          selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n        );\n      }\n    }),\n  );\n\n  onDestroy(() => {\n    for (const unsubscribe of unsubscribes) {\n      unsubscribe();\n    }\n  });\n</script>\n\n<nav\n  class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n  aria-expanded={$isSidebarOpen}\n  aria-labelledby=\"mc-sidebar__trigger\"\n  {...attributes}\n>\n  <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n    <button\n      id=\"mc-sidebar__trigger\"\n      class=\"mc-sidebar__trigger\"\n      aria-label={$isSidebarOpen\n        ? a11yLabels?.['close'] || 'Close the sidebar'\n        : a11yLabels?.['open'] || 'Open the sidebar'}\n      on:click={() => toggleSidebar()}\n    >\n      <span class=\"mc-sidebar__trigger__container\">\n        {#if $isSidebarOpen}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n            /></svg\n          >\n        {:else}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n            /></svg\n          >\n        {/if}\n      </span>\n    </button>\n    <Segment data={$sidebar?.HOME} />\n    <NavigationSeparator />\n    <Section data={$sidebar?.FEATURES} {a11yLabels} />\n    {#if $sidebar?.UTILITIES}\n      <div class=\"mc-sidebar__utilities\">\n        {#each $sidebar?.UTILITIES as section}\n          <NavigationSeparator />\n          <ul>\n            {#each section as feature}\n              <li class=\"mc-sidebar__utilities__item\">\n                <Segment data={feature} />\n              </li>\n            {/each}\n          </ul>\n        {/each}\n      </div>\n    {/if}\n  </div>\n  {#if parsedUser}\n    <NavigationUser\n      user={parsedUser}\n      data={$sidebar?.USER_FEATURES}\n      {a11yLabels}\n    />\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 10;\n    font-size: 14px;\n    color: white;\n    box-sizing: border-box;\n    fill: $color-sidebar-icon;\n    width: 320px;\n    background: $color-sidebar-background;\n    display: block;\n    height: 100vh;\n\n    &__container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      &.has-bottom-panel {\n        height: calc(100% - 88px);\n      }\n    }\n\n    &__utilities {\n      margin-bottom: 24px;\n\n      &__item {\n        margin: 4px 0px;\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n    }\n\n    &__trigger {\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: 0;\n      margin: 28px 0;\n      min-height: 38px;\n      width: 100%;\n      font-size: inherit;\n      font-family: inherit;\n\n      &-icon {\n        fill: $color-sidebar-icon;\n      }\n\n      &__container {\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        & > * {\n          width: 24px;\n          height: 24px;\n        }\n      }\n\n      &:hover &__container {\n        background: $color-sidebar-feature-hover-background;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        & .mc-sidebar__trigger__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &.is-open {\n      @include transition(width 300ms ease-in-out);\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 266px;\n        width: 38px;\n        border-radius: 4px;\n      }\n    }\n\n    &.is-close {\n      @include transition(width 300ms ease-in-out);\n\n      width: 64px;\n      padding: 0;\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 0px;\n        width: 64px;\n        border-radius: 0px;\n      }\n    }\n\n    ul {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}
+{"version":3,"file":"Sidebar.js","sources":["../../../../src/components/sidebar/Sidebar.svelte"],"sourcesContent":["<svelte:options tag={null} />\n\n<script lang=\"ts\">\n  import { onDestroy } from 'svelte';\n  import Segment from './sidebar-segment.nested.svelte';\n  import Section from './sidebar-section.nested.svelte';\n  import NavigationUser from './sidebar-user.nested.svelte';\n  import NavigationSeparator from './sidebar-separator.nested.svelte';\n  import { EventHandler } from '../../utilities/EventHandler';\n  import {\n    selectFeature,\n    updateSidebarData,\n    toggleSidebar,\n    isSidebarOpen,\n    sidebar,\n    selectedFeature,\n  } from './sidebar-service';\n  import type { Unsubscriber } from 'svelte/store';\n  import type { A11yLabels, Sidebar, User } from './sidebar.types';\n\n  export let data: string | Sidebar;\n  export let open: boolean;\n  export let code: string;\n  export let user: string | User;\n  export let a11yLabels: A11yLabels;\n  let eventHandler = new EventHandler();\n  let parsedUser: User;\n  let previousCode: string;\n  let previousData: string | Sidebar;\n  let previousOpen = false;\n\n  $: updateData(code, data);\n  $: updateOpen(open);\n  $: parsedUser = typeof user === 'string' ? (JSON.parse(user) as User) : user;\n  $: attributes = { ...$$restProps };\n  $: delete attributes.class;\n\n  function updateData(newCode: string, newData: string | Sidebar) {\n    if (typeof previousData !== typeof newData || previousData !== newData) {\n      previousData = newData;\n      updateSidebarData(newData);\n    }\n    if (typeof previousCode !== typeof newCode || previousCode !== newCode) {\n      previousCode = newCode;\n      selectFeature(newCode);\n    }\n  }\n\n  function updateOpen(newOpenStatus?: boolean) {\n    if (\n      typeof previousOpen !== typeof newOpenStatus ||\n      previousOpen !== newOpenStatus\n    ) {\n      previousOpen = Boolean(newOpenStatus);\n      toggleSidebar(Boolean(newOpenStatus));\n    }\n  }\n\n  const unsubscribes: Unsubscriber[] = [];\n  unsubscribes.push(\n    isSidebarOpen.subscribe((state) => {\n      eventHandler.dispatch('on-toggle', state);\n    }),\n  );\n\n  unsubscribes.push(\n    selectedFeature.subscribe((selection) => {\n      // Emit an event and close the menu when the selection changes.\n      if (selection) {\n        toggleSidebar(false);\n        eventHandler.dispatch(\n          'on-select',\n          selection.lv2?.code ?? selection.lv1?.code ?? selection.lv0?.code,\n        );\n      }\n    }),\n  );\n\n  onDestroy(() => {\n    for (const unsubscribe of unsubscribes) {\n      unsubscribe();\n    }\n  });\n</script>\n\n<nav\n  class=\"mc-sidebar {$isSidebarOpen ? 'is-open' : 'is-close'}\"\n  aria-expanded={$isSidebarOpen}\n  aria-labelledby=\"mc-sidebar__trigger\"\n  {...attributes}\n>\n  <div class=\"mc-sidebar__container {parsedUser ? 'has-bottom-panel' : ''}\">\n    <button\n      id=\"mc-sidebar__trigger\"\n      class=\"mc-sidebar__trigger\"\n      aria-label={$isSidebarOpen\n        ? a11yLabels?.['close'] || 'Close the sidebar'\n        : a11yLabels?.['open'] || 'Open the sidebar'}\n      on:click={() => toggleSidebar()}\n    >\n      <span class=\"mc-sidebar__trigger__container\">\n        {#if $isSidebarOpen}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M10.707 5.707a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L4.414 12l6.293-6.293zm9 0a1 1 0 00-1.414-1.414l-7 7a1 1 0 000 1.414l7 7a1 1 0 001.414-1.414L13.414 12l6.293-6.293z\"\n            /></svg\n          >\n        {:else}\n          <svg\n            class=\"mc-sidebar__trigger-icon\"\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            ><path\n              d=\"M5.707 4.293a1 1 0 00-1.414 1.414L10.586 12l-6.293 6.293a1 1 0 101.414 1.414l7-7a1 1 0 000-1.414l-7-7zm9 0a1 1 0 10-1.414 1.414L19.586 12l-6.293 6.293a1 1 0 001.414 1.414l7-7a1 1 0 000-1.414l-7-7z\"\n            /></svg\n          >\n        {/if}\n      </span>\n    </button>\n    <Segment data={$sidebar?.HOME} />\n    <NavigationSeparator />\n    <Section data={$sidebar?.FEATURES} {a11yLabels} />\n    {#if $sidebar?.UTILITIES}\n      <div class=\"mc-sidebar__utilities\">\n        {#each $sidebar?.UTILITIES as section}\n          <NavigationSeparator />\n          <ul>\n            {#each section as feature}\n              <li class=\"mc-sidebar__utilities__item\">\n                <Segment data={feature} />\n              </li>\n            {/each}\n          </ul>\n        {/each}\n      </div>\n    {/if}\n  </div>\n  {#if parsedUser}\n    <NavigationUser\n      user={parsedUser}\n      data={$sidebar?.USER_FEATURES}\n      {a11yLabels}\n    />\n  {/if}\n</nav>\n\n<style lang=\"scss\">\n  @import '@mozaic-ds/styles/settings-tools/_all-settings';\n  @import './sidebar-variables';\n\n  .mc-sidebar {\n    position: absolute;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    font-size: 14px;\n    color: white;\n    box-sizing: border-box;\n    fill: $color-sidebar-icon;\n    width: 320px;\n    background: $color-sidebar-background;\n    display: block;\n    height: 100vh;\n\n    &__container {\n      height: 100%;\n      display: flex;\n      flex-direction: column;\n      &.has-bottom-panel {\n        height: calc(100% - 88px);\n      }\n    }\n\n    &__utilities {\n      margin-bottom: 24px;\n\n      &__item {\n        margin: 4px 0px;\n        &:first-child {\n          margin-top: 0;\n        }\n        &:last-child {\n          margin-bottom: 0;\n        }\n      }\n    }\n\n    &__trigger {\n      cursor: pointer;\n      background: none;\n      border: none;\n      padding: 0;\n      margin: 28px 0;\n      min-height: 38px;\n      width: 100%;\n      font-size: inherit;\n      font-family: inherit;\n\n      &-icon {\n        fill: $color-sidebar-icon;\n      }\n\n      &__container {\n        height: 38px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        & > * {\n          width: 24px;\n          height: 24px;\n        }\n      }\n\n      &:hover &__container {\n        background: $color-sidebar-feature-hover-background;\n      }\n\n      &:focus-visible {\n        box-shadow: none;\n        border: none;\n        outline: none;\n\n        & .mc-sidebar__trigger__container {\n          box-shadow: none;\n          border: none;\n          border-radius: 6px;\n          outline: 1px solid #0b96cc;\n        }\n      }\n    }\n\n    &.is-open {\n      @include transition(width 300ms ease-in-out);\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 266px;\n        width: 38px;\n        border-radius: 4px;\n      }\n    }\n\n    &.is-close {\n      @include transition(width 300ms ease-in-out);\n\n      width: 64px;\n      padding: 0;\n\n      .mc-sidebar__trigger__container {\n        @include transition(\n          width 300ms ease-in-out,\n          margin-left 300ms ease-in-out,\n          border-radius 300ms ease-in-out\n        );\n        margin-left: 0px;\n        width: 64px;\n        border-radius: 0px;\n      }\n    }\n\n    ul {\n      list-style-type: none;\n      margin: 0;\n      padding: 0;\n    }\n  }\n</style>\n"],"names":["insert","target","svg","anchor","append","path","each_value","ctx","UTILITIES","length","i","div","each_blocks","li","ul","data","USER_FEATURES","dirty","navigationuser_changes","create_if_block_2","props","HOME","FEATURES","if_block1","create_if_block_1","create_if_block","nav","button","span","segment_changes","section_changes","class","nav_class_value","parsedUser","previousCode","previousData","$$props","open","code","user","a11yLabels","eventHandler","EventHandler","previousOpen","unsubscribes","push","isSidebarOpen","subscribe","state","dispatch","selectedFeature","selection","toggleSidebar","_d","_b","_a","lv2","_c","lv1","_e","lv0","onDestroy","unsubscribe","newCode","newData","newOpenStatus","updateSidebarData","selectFeature","Boolean","$$invalidate","JSON","parse","attributes","Object","assign","$$restProps"],"mappings":"uqCAgHUA,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,6YAjBJL,EAQAC,EAAAC,EAAAC,GAHGC,EAECF,EAAAG,yCAoBCC,EAAAC,MAAUC,+BAAfC,OAAIC,GAAA,oKADRV,EAWKC,EAAAU,EAAAR,oFAVIG,EAAAC,MAAUC,kBAAfC,OAAIC,GAAA,EAAA,yGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,yCAAJD,OAAIC,GAAA,wJAKiBH,EAAO,0FADxBP,EAEIC,EAAAY,EAAAV,qDADaI,EAAO,mJAFnBA,EAAO,yBAAZE,OAAIC,GAAA,6KADRV,EAMIC,EAAAa,EAAAX,6FALKI,EAAO,YAAZE,OAAIC,GAAA,EAAA,sGAAJD,OAAIC,EAAAE,EAAAH,OAAAC,GAAA,4DAAJD,OAAIC,GAAA,wLAYNH,EAAU,GACVQ,KAAAR,MAAUS,6GADVT,EAAU,IACV,GAAAU,IAAAC,EAAAH,KAAAR,MAAUS,+MA5CTT,EAAc,GAAAY,+BAuBRC,MAAA,CAAAL,KAAAR,MAAUc,oCAEVN,KAAAR,MAAUe,4BACpB,IAAAC,EAAAhB,MAAUC,WAASgB,EAAAjB,KAerBA,EAAU,IAAAkB,EAAAlB,8BAxDIA,EAAc,GAAG,UAAY,8BACjCA,EAAc,8CAEzBA,EAAU,kWAMEA,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,4DANGA,EAAU,GAAG,mBAAqB,oBANvEP,EAgEKC,EAAAyB,EAAAvB,GA1DHC,EAkDKsB,EAAAf,GAjDHP,EA+BQO,EAAAgB,GAvBNvB,EAsBMuB,EAAAC,uOA3BMrB,EAAC,GACTA,EAAU,IAAU,OAAK,oBACzBA,EAAU,IAAS,MAAK,qDA2Bf,GAAAU,IAAAY,EAAAd,KAAAR,MAAUc,2BAEV,GAAAJ,IAAAa,EAAAf,KAAAR,MAAUe,6CACpBf,MAAUC,sJApCkBD,EAAU,GAAG,mBAAqB,sBAmDhEA,EAAU,8IAxDIA,EAAc,GAAG,UAAY,eAAU,CAAAwB,MAAAC,+BAC3CzB,EAAc,mDAEzBA,EAAU,iXA/DV0B,EACAC,EACAC,QAROpB,GAAsBqB,QACtBC,GAAaD,QACbE,GAAYF,QACZG,GAAmBH,cACnBI,GAAsBJ,EAC7BK,MAAmBC,EAInBC,GAAe,QA6BbC,EAAY,GAClBA,EAAaC,KACXC,EAAcC,WAAWC,IACvBP,EAAaQ,SAAS,YAAaD,EAAK,KAI5CJ,EAAaC,KACXK,EAAgBH,WAAWI,kBAErBA,IACFC,GAAc,GACdX,EAAaQ,SACX,YADV,QAAAI,EAAA,QAAAC,EAAA,QAAAC,EAEUJ,EAAUK,eAFpBD,SAAAA,EAEyBjB,gBAFzBgB,EAAAA,EAAA,QAAAG,EAEiCN,EAAUO,WAF3C,IAAAD,SAAAA,EAEgDnB,gBAFhDe,EAAAA,EAAA,QAAAM,EAEwDR,EAAUS,WAFlE,IAAAD,SAAAA,EAEuErB,WAMrEuB,GAAS,KACI,IAAA,MAAAC,KAAelB,EACxBkB,+NA3CgBC,EAAiBC,EAWjBC,mBAXAF,EANNzB,SAODH,UADwB6B,EANjBjD,IAO4BoB,IAAiB6B,IAC7D7B,EAAe6B,EACfE,EAAkBF,WAET9B,UAAwB6B,GAAW7B,IAAiB6B,IAC7D7B,EAAe6B,EACfI,EAAcJ,4BAMPpB,UAFSsB,EAhBN5B,IAmBVM,IAAiBsB,IAEjBtB,EAAeyB,QAAQH,GACvBb,EAAcgB,QAAQH,sBArBvBI,EAAA,EAAApC,EAA6B,iBAATM,EAAqB+B,KAAKC,MAAMhC,GAAiBA,OACrEiC,EAALC,OAAAC,UAAuBC,yBACXH,EAAWzC,8BA+DDqB"}

package/public/bricoman/components/sidebar/Sidebar.svelte

@@ -157,7 +157,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 10;
+    z-index: 100;
     font-size: 14px;
     color: white;
     box-sizing: border-box;

package/public/bricoman/icons-storybook.js

@@ -13,6 +13,22 @@ import ArrowArrowRight24 from './icons/ArrowArrowRight24.js';
 import DisplayHome24 from './icons/DisplayHome24.js';
 import DisplayBlink24 from './icons/DisplayBlink24.js';
 import AspectQuantity24 from './icons/AspectQuantity24.js';
+import ArrowArrowTopRight16 from './icons/ArrowArrowTopRight16.js';
+import ArrowArrowBottomRight16 from './icons/ArrowArrowBottomRight16.js';
+
+if (!customElements.get('navigation-arrow-arrowtopright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowtopright-16px',
+    ArrowArrowTopRight16,
+  );
+}
+
+if (!customElements.get('navigation-arrow-arrowbottomright-16px')) {
+  customElements.define(
+    'navigation-arrow-arrowbottomright-16px',
+    ArrowArrowBottomRight16,
+  );
+}
 
 if (!customElements.get('navigation-arrow-arrow--left-32px')) {
   customElements.define('navigation-arrow-arrow--left-32px', ArrowArrowLeft32);

package/public/bricoman/main.d.ts

@@ -49,6 +49,7 @@ declare const _default: {
     Radar: typeof Accordion;
     Header: typeof Accordion;
     TagList: typeof Accordion;
+    Kpi: typeof Accordion;
 };
 export default _default;
 //# sourceMappingURL=main.d.ts.map

package/public/bricoman/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AA+ChE,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,OAAO,EACP,YAAY,EACZ,OAAO,EACP,IAAI,GACL,MAAM,oCAAoC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG5C,wBAiDE"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAgDhE,YAAY,EACV,OAAO,IAAI,WAAW,EACtB,OAAO,EACP,YAAY,EACZ,OAAO,EACP,IAAI,GACL,MAAM,oCAAoC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAG5C,wBAkDE"}

package/public/bricoman/utilities/DataTableUtilities.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAGhB,MAAM,yCAAyC,CAAC;AAqFjD,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}
+{"version":3,"file":"DataTableUtilities.d.ts","sourceRoot":"","sources":["../../../src/utilities/DataTableUtilities.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,QAAQ,EAIR,QAAQ,EACR,aAAa,EACb,WAAW,EAEX,eAAe,EAGhB,MAAM,yCAAyC,CAAC;AA6FjD,eAAO,MAAM,cAAc,aACf,QAAQ,YACR,QAAQ,KACjB,MAMF,CAAC;AAEF,eAAO,MAAM,gBAAgB,oBACV,MAAM,GAAG,SAAS,SAC5B,MAAM;;CAQd,CAAC;AACF,eAAO,MAAM,mBAAmB,UAAW,QAAQ,EAAE,KAAG,OASvD,CAAC;AACF,eAAO,MAAM,WAAW,UAAW,QAAQ,EAAE,KAAG,OAQ/C,CAAC;AAEF,eAAO,MAAM,gBAAgB,yBACL,aAAa,KAClC,aAaF,CAAC;AAEF,eAAO,MAAM,WAAW,UACf,QAAQ,EAAE,YACP,MAAM,eACH,WAAW,iBACT,aAAa,KAC3B,QAAQ,EA8DV,CAAC;AAEF,eAAO,MAAM,yBAAyB,eACxB,MAAM,eACL,MAAM,gBACL,OAAO,KACpB,MAAM,EAmBR,CAAC;AAEF,eAAO,MAAM,wBAAwB,SAC7B,QAAQ,mBACG,eAAe,GAAG,SAAS,sBACxB,OAAO,KAC1B,eAAe,GAAG,SAyCpB,CAAC;AAEF,eAAO,MAAM,uBAAuB,UAC3B,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,sBACxB,OAAO,iBACZ,OAAO,YACZ,OAAO,KAChB,eAAe,GAAG,SAwFpB,CAAC;AAEF,eAAO,MAAM,cAAc,oBACR,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,SAAS,oBACH,eAAe,GAAG,SAAS,KAC3C,eAAe,GAAG,SAOpB,CAAC;AAEF,eAAO,MAAM,mCAAmC,UACvC,QAAQ,EAAE,mBACA,eAAe,GAAG,SAAS,iBAC7B,OAAO,KACrB,OA4BF,CAAC;AAEF,oBAAY,aAAa;IACvB,KAAK,UAAU;CAChB"}

package/public/bricoman/utilities/DataTableUtilities.ts

@@ -23,6 +23,12 @@ const customTextFormatter = (customText: CustomText): string => {
   );
   return customTextHtml;
 };
+const customNumberFormatter = (number: Number): string => {
+  return `<span style="display: flex; justify-content: end;" > ${String(
+    number,
+  )} </span>`;
+};
+
 const imageFormatter = (image: Image): string =>
   `<img style="${
     image.style || 'width: 35px; height: 35px; margin-right: 8px;'
@@ -77,6 +83,8 @@ const getFormattedCell = (
       return cellValue as string;
     case 'CustomText':
       return customTextFormatter(cellValue as CustomText);
+    case 'Number':
+      return customNumberFormatter(cellValue as Number);
     case 'Image':
       return imageFormatter(cellValue as Image);
     case 'Badge':
@@ -102,7 +110,7 @@ export const getCellContent = (
 ): string => {
   const cellValue = bodyData?.cells[headData.id];
 
-  return cellValue
+  return cellValue || Number(cellValue) === 0
     ? getFormattedCell(headData.cellsFormat, cellValue, bodyData.id)
     : '';
 };

package/public/bundle.js

@@ -48,6 +48,7 @@ import Sidebar from './components/sidebar/Sidebar.js';
 import OptionButton from './components/optionbutton/OptionButton.js';
 import Header from './components/header/Header.js';
 import TagList from './components/taglist/TagList.js';
+import Kpi from './components/kpi/Kpi.js';
 
 if (!customElements.get('m-accordion')) {
   customElements.define('m-accordion', Accordion);
@@ -247,3 +248,7 @@ if (!customElements.get('m-header')) {
 if (!customElements.get('m-taglist')) {
   customElements.define('m-taglist', TagList);
 }
+
+if (!customElements.get('m-kpi')) {
+  customElements.define('m-kpi', Kpi);
+}

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}
+{#if true}
   <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;
   }