@communitiesuk/svelte-component-library 0.1.19-beta.0 → 0.1.19-beta.2

package/dist/assets/icons/MaterialIcon.svelte

@@ -0,0 +1,39 @@
+<script context="module" lang="ts">
+  // https://fonts.google.com/icons?icon.style=Rounded
+  const iconPaths = {
+    info: [
+      "M24.15 34q.65 0 1.075-.425.425-.425.425-1.075v-9.05q0-.6-.45-1.025Q24.75 22 24.15 22q-.65 0-1.075.425-.425.425-.425 1.075v9.05q0 .6.45 1.025.45.425 1.05.425ZM24 18.3q.7 0 1.175-.45.475-.45.475-1.15t-.475-1.2Q24.7 15 24 15q-.7 0-1.175.5-.475.5-.475 1.2t.475 1.15q.475.45 1.175.45ZM24 44q-4.25 0-7.9-1.525-3.65-1.525-6.35-4.225-2.7-2.7-4.225-6.35Q4 28.25 4 24q0-4.2 1.525-7.85Q7.05 12.5 9.75 9.8q2.7-2.7 6.35-4.25Q19.75 4 24 4q4.2 0 7.85 1.55Q35.5 7.1 38.2 9.8q2.7 2.7 4.25 6.35Q44 19.8 44 24q0 4.25-1.55 7.9-1.55 3.65-4.25 6.35-2.7 2.7-6.35 4.225Q28.2 44 24 44Zm0-20Zm0 17q7 0 12-5t5-12q0-7-5-12T24 7q-7 0-12 5T7 24q0 7 5 12t12 5Z",
+    ],
+  };
+  export type IconKind = keyof typeof iconPaths;
+
+  const orientations = ["n", "ne", "e", "se", "s", "sw", "w", "nw"] as const;
+  export type Orientation = (typeof orientations)[number];
+</script>
+
+<script lang="ts">
+  export let kind: IconKind = "settings";
+  export let orientation: Orientation = "n";
+
+  $: paths = iconPaths[kind] || [];
+  $: rotation = orientations.indexOf(orientation) * 45;
+</script>
+
+<svg
+  class="c inline h-16 w-16"
+  viewBox="0 0 48 48"
+  style={`transform: rotate(${rotation}deg)`}
+>
+  {#each paths as path}
+    <path d={path}></path>
+  {/each}
+</svg>
+
+<style>
+  .c {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    transition: all 0.1s ease-out;
+  }
+</style>

package/dist/assets/icons/MaterialIcon.svelte.d.ts

@@ -0,0 +1,27 @@
+declare const iconPaths: {
+    info: string[];
+};
+export type IconKind = keyof typeof iconPaths;
+declare const orientations: readonly ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+export type Orientation = (typeof orientations)[number];
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const MaterialIcon: $$__sveltets_2_IsomorphicComponent<{
+    kind?: IconKind;
+    orientation?: Orientation;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type MaterialIcon = InstanceType<typeof MaterialIcon>;
+export default MaterialIcon;

package/dist/components/content/InsetText.svelte

@@ -4,14 +4,20 @@
   // Define component props with types and default values
   let {
     content = "It can take up to 8 weeks to register a lasting power of attorney if there are no mistakes in the application.",
+    renderStringAsHTML = false,
   } = $props<{
     content?: string | Snippet;
+    renderStringAsHTML?: boolean;
   }>();
 </script>
 
 <div class="govuk-inset-text">
   {#if typeof content === "string"}
-    {content}
+    {#if renderStringAsHTML}
+      {@html content}
+    {:else}
+      {content}
+    {/if}
   {:else if content}
     {@render content()}
   {/if}

package/dist/components/content/InsetText.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     content?: string | Snippet;
+    renderStringAsHTML?: boolean;
 };
 declare const InsetText: import("svelte").Component<$$ComponentProps, {}, "">;
 type InsetText = ReturnType<typeof InsetText>;

package/dist/components/data-vis/line-chart/LineChart.svelte

@@ -130,7 +130,7 @@
       },
     },
     tooltipSnippet = undefined,
-    tooltipContent = activeMarkerId?.y,
+    tooltipContent = "y",
 
     basicLineParams = {},
     colorLineParams = (tier, line, lineIndex) => {

package/dist/components/data-vis/line-chart/LineChart.svelte.d.ts

@@ -40,7 +40,7 @@ declare const LineChart: import("svelte").Component<{
     globalTierParams?: Record<string, any>;
     tieredLineParams?: Record<string, any>;
     tooltipSnippet?: any;
-    tooltipContent?: any;
+    tooltipContent?: string;
     basicLineParams?: Record<string, any>;
     colorLineParams?: Function;
     colors?: Record<string, any>;
@@ -82,7 +82,7 @@ type $$ComponentProps = {
     globalTierParams?: Record<string, any>;
     tieredLineParams?: Record<string, any>;
     tooltipSnippet?: any;
-    tooltipContent?: any;
+    tooltipContent?: string;
     basicLineParams?: Record<string, any>;
     colorLineParams?: Function;
     colors?: Record<string, any>;

package/dist/components/data-vis/line-chart/ValueLabel.svelte

@@ -3,13 +3,14 @@
     activeMarkerId,
     labelColor = "red",
     labelTextColor,
-    tooltipContent = activeMarkerId.y,
+    tooltipContent = undefined,
     xFunction,
     yFunction,
-    x,
-    y,
-    markerRect,
+    x = undefined,
+    y = undefined,
+    markerRect = undefined,
     tooltipSnippet,
+    labelText = undefined,
   } = $props();
 
   let textDimensions = $state();
@@ -17,14 +18,21 @@
   let horizontalPadding = $derived(verticalPadding * 2);
 </script>
 
-<div
+<!-- <div
   style="position:absolute;
   top: {markerRect?.y - (textDimensions?.height ?? 0) - 15}px;
 left: {markerRect?.x +
     (markerRect?.width ?? 0) / 2 -
     (textDimensions?.width ?? 0) / 2}px;
-  pointer-events: none;
+  pointer-events: none; border 1px solid blue
   "
+> -->
+<div
+  style="position:absolute; left: {markerRect?.x - textDimensions?.width / 2}px;
+      top: {markerRect?.y -
+    textDimensions?.height -
+    20}px; pointer-events: none"
+  bind:contentRect={textDimensions}
 >
   {#if tooltipSnippet === undefined}
     <div
@@ -32,10 +40,17 @@ left: {markerRect?.x +
   padding: 5px;
   border-radius: 5px;"
     >
-      <div bind:contentRect={textDimensions}>{activeMarkerId.y}</div>
+      {#if tooltipContent}
+        <div>
+          {activeMarkerId[tooltipContent]}
+        </div>
+      {:else}
+        <div>
+          <div>{activeMarkerId?.value ?? activeMarkerId}</div>
+        </div>{/if}
     </div>
   {:else}
-    <div bind:contentRect={textDimensions}>
+    <div>
       {@render tooltipSnippet(activeMarkerId)}
     </div>
   {/if}

package/dist/components/data-vis/line-chart/ValueLabel.svelte.d.ts

@@ -10,10 +10,11 @@ declare const ValueLabel: import("svelte").Component<{
     tooltipContent?: any;
     xFunction: any;
     yFunction: any;
-    x: any;
-    y: any;
-    markerRect: any;
+    x?: any;
+    y?: any;
+    markerRect?: any;
     tooltipSnippet: any;
+    labelText?: any;
 }, {}, "">;
 type $$ComponentProps = {
     activeMarkerId: any;
@@ -22,8 +23,9 @@ type $$ComponentProps = {
     tooltipContent?: any;
     xFunction: any;
     yFunction: any;
-    x: any;
-    y: any;
-    markerRect: any;
+    x?: any;
+    y?: any;
+    markerRect?: any;
     tooltipSnippet: any;
+    labelText?: any;
 };