@communitiesuk/svelte-component-library 0.1.19-beta.3 → 0.1.19-beta.34

package/dist/components/ui/CardHeader.svelte

@@ -0,0 +1,46 @@
+<script>
+  let {
+    text = "Card header",
+    textSize = "1.5rem",
+    textColor = "#1D70B8",
+    backgroundColor = "white",
+    href = undefined,
+    subtitle = undefined,
+  } = $props();
+</script>
+
+<a
+  class="link govuk-heading-m"
+  {href}
+  style="font-size: {textSize}; color: {textColor}; background-color: {backgroundColor}; margin: {subtitle ??
+    0}"
+>
+  {text}
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 10 17"
+    aria-hidden="true"
+  >
+    <path
+      d="M6.21622 8.5L0 2.36667L1.89189 0.5L10 8.5L1.89189 16.5L0 14.6333L6.21622 8.5Z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</a>
+{#if subtitle !== undefined}
+  <p>{subtitle}</p>{/if}
+
+<style>
+  .link {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 0.5rem;
+  }
+  p {
+    color: #666;
+  }
+</style>

package/dist/components/ui/CardHeader.svelte.d.ts

@@ -0,0 +1,21 @@
+export default CardHeader;
+type CardHeader = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const CardHeader: import("svelte").Component<{
+    text?: string;
+    textSize?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    href?: any;
+    subtitle?: any;
+}, {}, "">;
+type $$ComponentProps = {
+    text?: string;
+    textSize?: string;
+    textColor?: string;
+    backgroundColor?: string;
+    href?: any;
+    subtitle?: any;
+};

package/dist/components/ui/ChartExporter.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+  // src/lib/utils/exportChartPNG.ts
+  export async function exportChartPNG(
+    node: HTMLElement,
+    {
+      fileName = "chart.png",
+      margin = 16,
+      backgroundColor = "#ffffff",
+      pixelRatio = Math.max(2, window.devicePixelRatio || 1),
+      filter,
+    }: {
+      fileName?: string;
+      margin?: number; // padding applied during export to avoid edges clipping
+      backgroundColor?: string;
+      pixelRatio?: number;
+      filter?: (node: Element) => boolean;
+    },
+  ): Promise<string> {
+    const { toPng } = await import("html-to-image");
+
+    // Wait for web fonts to settle (prevents text reflow/misalignment)
+    if ((document as any).fonts?.ready) {
+      try {
+        await (document as any).fonts.ready;
+      } catch {
+        /* ignore */
+      }
+    }
+
+    // Measure the true content size (includes overflow)
+    const exportWidth = Math.ceil(node.scrollWidth + margin * 2);
+    const exportHeight = Math.ceil(node.scrollHeight + margin * 2);
+
+    const dataUrl = await toPng(node, {
+      cacheBust: false,
+      backgroundColor,
+      pixelRatio,
+      width: exportWidth,
+      height: exportHeight,
+      style: {
+        // Apply padding inside the cloned element
+        padding: `${margin}px`,
+        boxSizing: "border-box",
+        // Ensure no clipping
+        overflow: "visible",
+      },
+      filter,
+    });
+
+    const name = fileName.toLowerCase().endsWith(".png")
+      ? fileName
+      : `${fileName}.png`;
+    const link = document.createElement("a");
+    link.download = name;
+    link.href = dataUrl;
+    link.click();
+
+    return dataUrl;
+  }
+
+  // Props
+  let {
+    node = null,
+    fileName = "chart",
+  }: { node: HTMLElement | null; fileName?: string } = $props();
+
+  // Local state for optional external triggering
+  let isExporting = $state(false);
+
+  async function exportNow() {
+    if (!node) return;
+
+    isExporting = true;
+
+    // Measure width to force correct clone sizing
+    const rect = node.getBoundingClientRect();
+    const measuredWidth = Math.ceil(rect.width);
+
+    // ------- Clone -------
+    const clone = node.cloneNode(true) as HTMLElement;
+    Object.assign(clone.style, {
+      boxSizing: "border-box",
+      width: `${measuredWidth}px`,
+      height: "auto",
+      transform: "none",
+      overflow: "visible",
+      fontFamily: "GDS Transport",
+    });
+
+    // ------- Hide tooltips (optional) -------
+    const hideSelectors = ['[role="tooltip"]'];
+    clone
+      .querySelectorAll<HTMLElement>(hideSelectors.join(","))
+      .forEach((el) => {
+        el.style.display = "none";
+      });
+
+    // ------- Sandbox offscreen -------
+    const sandbox = document.createElement("div");
+    Object.assign(sandbox.style, {
+      position: "fixed",
+      left: "-10000px",
+      top: "0",
+      pointerEvents: "none",
+    });
+
+    sandbox.appendChild(clone);
+    document.body.appendChild(sandbox);
+
+    try {
+      await exportChartPNG(clone, {
+        fileName,
+        margin: 16,
+        backgroundColor: "#ffffff",
+        pixelRatio: Math.max(2, window.devicePixelRatio || 1),
+        filter: (el: Element) => {
+          if (!(el instanceof HTMLElement)) return true;
+
+          // Exclude tooltips only
+          if (el.matches(hideSelectors.join(","))) return false;
+
+          return true;
+        },
+      });
+    } finally {
+      sandbox.remove();
+      isExporting = false;
+    }
+  }
+
+  // We export the function so parent can trigger it manually
+  export { exportNow };
+</script>
+
+<!-- Default button (can be hidden if user triggers manually) -->
+<button
+  class="govuk-button govuk-button--secondary"
+  on:click={exportNow}
+  disabled={isExporting}
+>
+  {isExporting ? "Exporting…" : "Download this chart"}
+</button>

package/dist/components/ui/ChartExporter.svelte.d.ts

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    node: HTMLElement | null;
+    fileName?: string;
+};
+declare const ChartExporter: import("svelte").Component<$$ComponentProps, {
+    exportChartPNG: (node: HTMLElement, { fileName, margin, backgroundColor, pixelRatio, filter, }: {
+        fileName?: string;
+        margin?: number;
+        backgroundColor?: string;
+        pixelRatio?: number;
+        filter?: (node: Element) => boolean;
+    }) => Promise<string>;
+    exportNow: () => Promise<void>;
+}, "">;
+type ChartExporter = ReturnType<typeof ChartExporter>;
+export default ChartExporter;

package/dist/components/ui/CheckBox.svelte

@@ -58,6 +58,7 @@
   // Modify toggleCheckbox to handle non-JS scenarios
   function toggleCheckbox(option: CheckboxOption) {
     // If JS/modern features aren't supported, let the native checkbox behavior work
+
     if (!isSupported) return;
 
     if (option.exclusive) {

package/dist/components/ui/Details.svelte

@@ -1,12 +1,51 @@
-<script>
-  let { summaryText, detailedText } = $props();
+<script lang="ts">
+  let {
+    summaryText,
+    detailedText,
+    renderStringAsHTML = false,
+    noInset = false,
+    overlapBelow = false,
+    expanded = $bindable(false),
+    groupName = undefined,
+  } = $props();
 </script>
 
-<details class="govuk-details">
-  <summary class="govuk-details__summary">
-    <span class="govuk-details__summary-text">{summaryText}</span>
-  </summary>
-  <div class="govuk-details__text">
-    {detailedText}
+<details class="govuk-details" open={expanded} name={groupName}>
+  {#if renderStringAsHTML}
+    <summary class="govuk-details__summary-text">
+      {@html summaryText}
+    </summary>
+  {:else}
+    <summary class="govuk-details__summary-text">{summaryText}</summary>
+  {/if}
+
+  <div
+    class={`govuk-details__text ${noInset === true ? "no-inset" : ""} ${overlapBelow === true ? "overlap-below" : ""}`}
+  >
+    {#if typeof detailedText === "string"}
+      {#if renderStringAsHTML}
+        {@html detailedText}
+      {:else}
+        {detailedText}
+      {/if}
+    {:else if detailedText}
+      {@render detailedText()}
+    {/if}
   </div>
 </details>
+
+<style>
+  .no-inset {
+    padding: 0;
+    border: 0;
+  }
+
+  details {
+    position: relative;
+  }
+
+  .overlap-below {
+    position: absolute;
+    background-color: white;
+  }
+</style>

package/dist/components/ui/Details.svelte.d.ts

@@ -1,13 +1,11 @@
-export default Details;
-type Details = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
 declare const Details: import("svelte").Component<{
     summaryText: any;
     detailedText: any;
-}, {}, "">;
-type $$ComponentProps = {
-    summaryText: any;
-    detailedText: any;
-};
+    renderStringAsHTML?: boolean;
+    noInset?: boolean;
+    overlapBelow?: boolean;
+    expanded?: boolean;
+    groupName?: any;
+}, {}, "expanded">;
+type Details = ReturnType<typeof Details>;
+export default Details;

package/dist/components/ui/Masthead.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import homepageIllustration from "./../../assets/images/homepage-illustration.svg";
+  import type { Snippet } from "svelte";
 
   // Define component props with types and default values
   let {
@@ -12,6 +13,11 @@
     imageAlt = "",
     backgroundColor = "#1d70b8", // GOV.UK blue by default
     textColor = "#FFFFFF",
+    imgMarginTop = "15px",
+    paddingTop = "30px",
+    titlePaddingTop = false,
+    paddingBottom = "30px",
+    contentSnippet = undefined,
   } = $props<{
     title?: string;
     description?: string;
@@ -22,18 +28,32 @@
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
+    contentSnippet?: Snippet;
   }>();
+
+  let arg = "hello";
 </script>
 
 <div
   class="app-masthead"
-  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor};"
+  style="background-color: {backgroundColor}; border-bottom-color: {backgroundColor}; --masthead-text-color: {textColor}; --padding-top: {paddingTop}; --padding-bottom: {paddingBottom};"
 >
   <div class="govuk-width-container">
     <div class="govuk-grid-row">
-      <div class="govuk-grid-column-two-thirds-from-desktop">
+      <div
+        class="govuk-grid-column-two-thirds-from-desktop {titlePaddingTop
+          ? 'custom-padding'
+          : ''}"
+      >
         <h1 class="govuk-heading-xl app-masthead__title">{@html title}</h1>
         <p class="app-masthead__description">{description}</p>
+        {#if contentSnippet}
+          {@render contentSnippet()}
+        {/if}
         {#if includeButton === true}
           <a
             href={buttonHref}
@@ -61,6 +81,7 @@
       <div class="govuk-grid-column-one-third-from-desktop">
         <img
           class="app-masthead__image"
+          style="--img-margin-top: {imgMarginTop}"
           src={imageSrc}
           alt={imageAlt}
           role="presentation"
@@ -88,8 +109,8 @@
   @media (min-width: 40.0625em) {
     .app-masthead.app-masthead {
       /* Responsive spacing unit 6: 30px on large screens */
-      padding-top: 30px;
-      padding-bottom: 30px;
+      padding-top: var(--padding-top);
+      padding-bottom: var(--padding-bottom);
     }
   }
 
@@ -128,12 +149,19 @@
   }
 
   /* @include govuk-media-query($from: desktop) - Desktop breakpoint is 769px */
-  @media (min-width: 48.0625em) {
+  @media (min-width: 53em) {
     .app-masthead .app-masthead__image.app-masthead__image {
       display: block;
       width: 100%;
       /* margin-top: govuk-spacing(3); - Static spacing unit 3 is 15px */
-      margin-top: 15px;
+      margin-top: var(--img-margin-top);
+    }
+  }
+
+  @media (max-width: 52.9375em) {
+    .govuk-grid-column-two-thirds-from-desktop {
+      width: 100%;
+      float: none;
     }
   }
 
@@ -276,4 +304,14 @@
   .app-masthead__description {
     color: var(--masthead-text-color);
   }
+
+  .custom-padding {
+    padding-top: 32px;
+  }
+
+  @media (max-width: 820px) {
+    .custom-padding {
+      padding-top: 16px;
+    }
+  }
 </style>

package/dist/components/ui/Masthead.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Snippet } from "svelte";
 type $$ComponentProps = {
     title?: string;
     description?: string;
@@ -8,6 +9,11 @@ type $$ComponentProps = {
     imageAlt?: string;
     backgroundColor?: string;
     textColor?: string;
+    imgMarginTop?: string;
+    paddingTop?: string;
+    titlePaddingTop?: boolean;
+    paddingBottom?: string;
+    contentSnippet?: Snippet;
 };
 declare const Masthead: import("svelte").Component<$$ComponentProps, {}, "">;
 type Masthead = ReturnType<typeof Masthead>;

package/dist/components/ui/RelatedContent.svelte

@@ -30,11 +30,13 @@
     headingLevel = 2 as 1 | 2 | 3 | 4 | 5 | 6, // Main heading level (used by first 'main' section)
     listTruncateThreshold = 5, // Default threshold, can be overridden per section
     disableGa4 = false,
+    marginBottom = "60px",
   } = $props<{
     sections?: RelatedContentSection[];
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number; // Default threshold
     disableGa4?: boolean;
+    marginBottom?: string;
   }>();
 
   // Helper to check if a link is external
@@ -229,6 +231,7 @@
   class="gem-c-related-navigation govuk-!-display-none-print {hasJavaScript
     ? 'govuk-frontend-supported'
     : ''}"
+  style="margin-bottom: {marginBottom};"
   role="complementary"
 >
   {#if mainSection && mainSection.title}
@@ -304,7 +307,7 @@
 <style>
   .gem-c-related-navigation {
     border-top: 2px solid #1d70b8;
-    margin-bottom: 60px;
+    /* margin-bottom: 60px; */
     color: #0b0c0c;
   }
 

package/dist/components/ui/RelatedContent.svelte.d.ts

@@ -24,6 +24,7 @@ type $$ComponentProps = {
     headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     listTruncateThreshold?: number;
     disableGa4?: boolean;
+    marginBottom?: string;
 };
 declare const RelatedContent: import("svelte").Component<$$ComponentProps, {}, "">;
 type RelatedContent = ReturnType<typeof RelatedContent>;

package/dist/components/ui/SearchAutocomplete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { clsx } from "clsx";
+  import { on } from "svelte/events";
   import Search from "./Search.svelte"; // Base component
   import "accessible-autocomplete/dist/accessible-autocomplete.min.css";
   import { browser } from "$app/environment";
@@ -55,6 +56,7 @@
     hideHint?: boolean; // Hide the hint input element when autoselect is true
     prefixMatchOnly?: boolean; // Only show suggestions that start with the query (better for hint behavior)
     autoFocusSubmitOnSelection?: boolean; // Auto-focus submit button when selection is confirmed
+    allowFreeTextSubmission?: boolean; // Treat free-typed input as confirmed when submitted (works with or without form)
   };
 
   let {
@@ -93,6 +95,7 @@
     hideHint = false, // Default to false - show hint by default
     prefixMatchOnly = false, // Default to false - show all matches
     autoFocusSubmitOnSelection = false, // Default to false - don't auto-focus by default
+    allowFreeTextSubmission = false, // Default to false - only confirmed suggestions submit
     ...restSearchProps // Other props for the base Search component
   }: Props = $props();
 
@@ -105,8 +108,6 @@
   let currentSourceKey = $state<string | undefined>(undefined);
   let currentSourceProperty = $state<string | undefined>(undefined);
 
-
-
   // --- Derived Values ---
   const wrapperClasses = $derived(
     clsx(
@@ -408,55 +409,41 @@
       // Define confirm function
       let isSubmitting = false; // Prevent double submit
       const handleConfirm = (confirmedValue: Suggestion | undefined) => {
-        console.log('handleConfirm called with:', confirmedValue, 'isSubmitting:', isSubmitting); // Debug log
-        
-        if (confirmedValue === undefined) return;
-        
-        // Reset submitting flag at the start of each new confirmation
-        isSubmitting = false;
+        if (confirmedValue === undefined || isSubmitting) return;
+
+        isSubmitting = true;
 
-        // Re-assign selectedValue before any form-based guard checks (!form) so bindings still update
-        // (e.g. when no <form> exists around the component usage) and search component value is being used clienside without a page reload
+        // Update selectedValue
         selectedValue =
           typeof confirmedValue === "string"
             ? confirmedValue
             : confirmedValue.value;
 
-        // Type assertion needed here
+        // Mark as accepted to prevent form submit handler from processing again
         const inputElement =
           autocompleteInstance?.inputElement as HTMLInputElement;
-        const form = containerElement?.closest("form");
-        const submitButton = containerElement?.querySelector('button[type="submit"]') as HTMLButtonElement;
-        
-        console.log('Submit button found:', !!submitButton); // Debug log
-
-        // Always focus the submit button first, regardless of form presence (if feature is enabled)
-        if (autoFocusSubmitOnSelection && submitButton) {
-          console.log('Focusing submit button'); // Debug log
-          // Use requestAnimationFrame to ensure the focus happens after DOM updates
-          requestAnimationFrame(() => {
-            submitButton.focus();
-            console.log('Submit button focused, document.activeElement:', document.activeElement === submitButton);
-          });
+        if (inputElement) {
+          inputElement.value = inputValueTemplate(confirmedValue);
+          inputElement.dataset.autocompleteAccepted = "true";
         }
 
-        // Handle form submission separately
-        if (inputElement && form) {
-          isSubmitting = true;
-          inputElement.value = inputValueTemplate(confirmedValue);
-          inputElement.dataset.autocompleteAccepted = "true"; // Set tracking attribute
-
-          // Submit form immediately
-          console.log('Submitting form'); // Debug log
-          if (form.requestSubmit) {
-            form.requestSubmit();
-          } else {
-            form.submit(); // Fallback for older browsers
+        // Auto-focus submit button if enabled
+        if (autoFocusSubmitOnSelection) {
+          const submitButton = containerElement?.querySelector(
+            'button[type="submit"]',
+          ) as HTMLButtonElement | null;
+          if (submitButton) {
+            requestAnimationFrame(() => submitButton.focus());
           }
-          
-          // Reset flag after submission
-          isSubmitting = false;
         }
+
+        // Submit form if present
+        const form = containerElement?.closest("form");
+        if (form) {
+          form.requestSubmit?.() ?? form.submit();
+        }
+
+        isSubmitting = false;
       };
 
       // Initialise accessible-autocomplete
@@ -505,15 +492,15 @@
             ".gem-c-search-with-autocomplete__menu",
           );
         // Listen for input changes on the autocomplete field
-        autocompleteInputElement.addEventListener("input", () => {
+        on(autocompleteInputElement, "input", () => {
           const val = autocompleteInputElement.value;
-          
+
           // Reset isSubmitting flag when user starts typing again
           if (isSubmitting) {
-            console.log('User typing, resetting isSubmitting flag');
+            console.log("User typing, resetting isSubmitting flag");
             isSubmitting = false;
           }
-          
+
           // Remove any existing 'too-short' warning before adding a new one to ensure we don't accumulate multiple warning items.
           suggestionsMenu
             ?.querySelector(
@@ -544,7 +531,7 @@
         // autocompleteInputElement.classList.add("autocomplete__input"); // Add specific class if needed
 
         // Add Enter key workaround from original JS
-        autocompleteInputElement.addEventListener("keydown", (e) => {
+        on(autocompleteInputElement, "keydown", (e) => {
           if (isSubmitting) return; // Don't interfere if already submitting
           const dropdownVisible =
             autocompleteInputElement.getAttribute("aria-expanded") === "true";
@@ -567,6 +554,44 @@
         // );
       }
 
+      // Handle free-text submission when allowFreeTextSubmission is enabled
+      // handleConfirm is only called by the library when selecting from dropdown
+      // We need to catch: (1) form submit events, (2) button clicks outside forms
+      if (allowFreeTextSubmission) {
+        const updateFreeText = () => {
+          if (!autocompleteInputElement) return;
+
+          const wasAccepted =
+            autocompleteInputElement.dataset.autocompleteAccepted === "true";
+          const value = autocompleteInputElement.value?.trim();
+
+          if (value && !wasAccepted) {
+            selectedValue = value;
+          }
+
+          // Reset flag after submission
+          setTimeout(() => {
+            if (autocompleteInputElement) {
+              autocompleteInputElement.dataset.autocompleteAccepted = "false";
+            }
+          }, 100);
+        };
+
+        // Handle form submission
+        const form = containerElement?.closest("form");
+        if (form) {
+          on(form, "submit", updateFreeText);
+        }
+
+        // Handle button clicks (for non-form usage)
+        const submitButton = containerElement?.querySelector(
+          'button[type="submit"]',
+        ) as HTMLButtonElement | null;
+        if (submitButton && !form) {
+          on(submitButton, "click", updateFreeText);
+        }
+      }
+
       // IMPORTANT: Remove the original Search.svelte input, as accessible-autocomplete replaces it.
       // We render it initially so accessible-autocomplete can grab its id, name, value.
       if (searchInput) {

package/dist/components/ui/SearchAutocomplete.svelte.d.ts

@@ -40,6 +40,7 @@ type Props = {
     hideHint?: boolean;
     prefixMatchOnly?: boolean;
     autoFocusSubmitOnSelection?: boolean;
+    allowFreeTextSubmission?: boolean;
 };
 declare const SearchAutocomplete: import("svelte").Component<Props, {}, "selectedValue">;
 type SearchAutocomplete = ReturnType<typeof SearchAutocomplete>;