@onsvisual/svelte-components 0.1.58 → 0.1.60

package/dist/@types/js/utils.d.ts

@@ -7,6 +7,11 @@ export function formatDate(str: any, locale?: string, opts?: {
     day: string;
 }): string;
 export function format(val: any, dp?: any): any;
+export function formatter(dp?: any): {
+    (value: number): string;
+    (value: number | bigint): string;
+};
 export function ascending(a: any, b: any): number;
 export function descending(a: any, b: any): number;
 export function sleep(ms?: number): Promise<any>;
+export function contrastColor(color: any): "black" | "white";

package/dist/@types/layout/Titleblock/Titleblock.svelte.d.ts

@@ -12,6 +12,7 @@ export default class Titleblock extends SvelteComponentTyped<{
     censusLogo?: boolean;
     titleBadge?: string;
     titleBadgeAriaLabel?: string;
+    titleBadgeColor?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -37,6 +38,7 @@ declare const __propDef: {
         censusLogo?: boolean;
         titleBadge?: string;
         titleBadgeAriaLabel?: string;
+        titleBadgeColor?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/datavis/Table/Table.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { format, isNumeric, ascending, descending } from "../../js/utils.js";
+  import { formatter, isNumeric, ascending, descending } from "../../js/utils.js";
 
   /**
    * An optional title for the table
@@ -46,6 +46,7 @@
   let sort = columns.map((c) => "none");
 
   $: sortable = columns.map((d) => d.sortable).includes(true);
+  $: formatters = columns.map((d) => formatter(d.dp));
 </script>
 
 <div
@@ -121,16 +122,14 @@
     <tbody class="ons-table__body">
       {#each _data as row}
         <tr class="ons-table__row">
-          {#each columns as col}
+          {#each columns as col, i}
             <td
               class="ons-table__cell"
               class:ons-table__cell--numeric="{col.numeric}"
               data-th="{col.label}"
               >{@html col.numeric && isNumeric(row[col.key])
-                ? format(row[col.key], col.dp)
-                : row[col.key]
-                ? row[col.key]
-                : "&ndash;"}</td
+                ? formatters[i](row[col.key])
+                : row[col.key] || "&ndash;"}</td
             >
           {/each}
         </tr>

package/dist/decorators/Em/Em.svelte

@@ -1,5 +1,5 @@
 <script>
-  import parse from "parse-color";
+  import { contrastColor } from "../../js/utils";
 
   /**
    * Any valid CSS colour
@@ -12,16 +12,7 @@
    */
   export let nowrap = true;
 
-  function textColor(color) {
-    const rgb = parse(color).rgb;
-    if (rgb) {
-      const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
-      return brightness > 125 ? "black" : "white";
-    }
-    return "black";
-  }
-
-  $: text = textColor(color);
+  $: text = contrastColor(color);
 </script>
 
 <mark

package/dist/js/utils.js

@@ -1,3 +1,5 @@
+import parse from "parse-color";
+
 const randomString = () => {
   return Math.random().toString(16).slice(2, 8);
 };
@@ -44,6 +46,15 @@ export const format = (val, dp = null) => {
     : val.toLocaleString("en-GB");
 };
 
+export const formatter = (dp = null) => {
+  return Number.isInteger(dp)
+    ? new Intl.NumberFormat("en-GB", {
+        minimumFractionDigits: dp,
+        maximumFractionDigits: dp,
+      }).format
+    : new Intl.NumberFormat("en-GB").format;
+};
+
 export const ascending = (a, b) =>
   a == null || b == null ? NaN : a < b ? -1 : a > b ? 1 : a >= b ? 0 : NaN;
 
@@ -51,3 +62,13 @@ export const descending = (a, b) =>
   a == null || b == null ? NaN : b < a ? -1 : b > a ? 1 : b >= a ? 0 : NaN;
 
 export const sleep = (ms = 1000) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export const contrastColor = (color) => {
+  if (!color || typeof color !== "string") return "black";
+  const rgb = parse(color).rgb;
+  if (rgb) {
+    const brightness = (rgb[0] * 299 + rgb[1] * 587 + rgb[2] * 114) / 1000;
+    return brightness > 125 ? "black" : "white";
+  }
+  return "black";
+};

package/dist/layout/Titleblock/Titleblock.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { contrastColor } from "../../js/utils";
   import Container from "../../wrappers/Container/Container.svelte";
   import Meta from "./Meta.svelte";
 
@@ -52,6 +53,13 @@
    * @type {string}
    */
   export let titleBadgeAriaLabel = null;
+  /**
+   * Set a colour for the title badge
+   * @type {string}
+   */
+  export let titleBadgeColor = "#003C57";
+
+  $: titleBadgeTextColor = contrastColor(titleBadgeColor);
 </script>
 
 <Container
@@ -68,8 +76,11 @@
           <h1 class="ons-u-fs-xxxl ons-u-mt-s ons-u-mb-m ons-u-pb-no ons-u-pt-no">
             {#if titleBadge}
               <span style="margin-right: 6px">{@html title}</span>
-              <span class="title-badge" aria-label="{titleBadgeAriaLabel ?? titleBadge}"
-                >{titleBadge}</span
+              <span
+                class="title-badge"
+                aria-label="{titleBadgeAriaLabel ?? titleBadge}"
+                style:background="{titleBadgeColor}"
+                style:color="{titleBadgeTextColor}">{titleBadge}</span
               >
             {:else}
               {@html title}
@@ -131,7 +142,6 @@
     font-size: 40%;
     font-weight: bold;
     color: white;
-    background-color: #003c57;
     padding: 2px 8px 4px 8px;
     border-radius: 4px;
   }</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onsvisual/svelte-components",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "type": "module",
   "private": false,
   "homepage": "https://onsvisual.github.io/svelte-components",