@mozaic-ds/web-components 0.8.0 → 0.9.0

package/public/adeo/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/adeo/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/adeo/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/adeo/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/adeo/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/adeo/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)
     : '';
 };