@qld-gov-au/qgds-bootstrap5 2.0.12 → 2.1.1

package/src/img/icons-sprite.svg

@@ -1,28 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" role="img">
-  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
-  </symbol>
-
-  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
-    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
-  </symbol>
-
   <symbol id="qgds-icon-accessibility" viewBox="0 0 32 32">
     <path fill="currentColor" d="M15.933 7.738c-.793 0-1.457-.267-1.992-.802-.535-.535-.803-1.2-.803-1.992 0-.793.268-1.458.803-1.993.535-.535 1.2-.802 1.992-.802.793 0 1.457.267 1.993.802.535.535.802 1.2.802 1.993 0 .793-.267 1.457-.802 1.992-.535.535-1.2.802-1.993.802ZM11.805 28.1V12.215a53.57 53.57 0 0 1-3.343-.396 43.696 43.696 0 0 1-3.262-.616 1.505 1.505 0 0 1-.978-.663 1.48 1.48 0 0 1-.212-1.148 1.24 1.24 0 0 1 .7-.918 1.77 1.77 0 0 1 1.198-.138c1.608.342 3.263.596 4.963.763a51.862 51.862 0 0 0 10.175 0 46.103 46.103 0 0 0 5.046-.763 1.767 1.767 0 0 1 1.198.138c.38.187.614.493.7.918.085.417.015.8-.212 1.148a1.506 1.506 0 0 1-.978.663c-1.067.244-2.154.45-3.262.616a53.564 53.564 0 0 1-3.343.396V28.1c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.013.42a1.38 1.38 0 0 1-1.013-.42 1.38 1.38 0 0 1-.42-1.013v-6.72h-2.657v6.72c0 .395-.14.732-.42 1.013-.281.28-.619.42-1.014.42a1.38 1.38 0 0 1-1.012-.42 1.38 1.38 0 0 1-.42-1.013Z"></path>
   </symbol>
@@ -400,6 +376,22 @@
     <path fill="currentColor" d="M7.842 23.526 4.82 26.548c-.337.337-.724.414-1.162.231-.439-.182-.658-.512-.658-.988V5.141c0-.589.21-1.092.63-1.512A2.056 2.056 0 0 1 5.14 3h21.72c.588 0 1.091.21 1.51.63.42.419.63.922.63 1.51v16.246a2.06 2.06 0 0 1-.63 1.511c-.419.42-.922.63-1.51.63H7.842Zm-.744-1.72H26.86a.403.403 0 0 0 .29-.13.403.403 0 0 0 .13-.29V5.14a.403.403 0 0 0-.13-.29.403.403 0 0 0-.29-.13H5.14a.403.403 0 0 0-.29.13.403.403 0 0 0-.13.29v19.14l2.378-2.473Zm3.197-7.383c.335 0 .62-.118.856-.354s.354-.522.354-.857c0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.856-.354c-.341 0-.628.118-.861.354-.233.236-.35.521-.35.856 0 .335.117.62.35.857.233.236.52.354.86.354Zm5.756 0c.335 0 .62-.118.857-.354a1.17 1.17 0 0 0 .353-.857c0-.335-.118-.62-.353-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.857.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.522.354.857.354Zm5.64 0c.335 0 .62-.118.857-.354.236-.236.354-.522.354-.857 0-.335-.118-.62-.354-.856a1.167 1.167 0 0 0-.857-.354c-.335 0-.62.118-.856.354a1.167 1.167 0 0 0-.354.856c0 .335.118.62.354.857.236.236.521.354.856.354Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-spinner-step-1" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M29.988 8.231A16 16 0 1 1 16.928.027l-.17 2.93a13.064 13.064 0 1 0 10.663 6.7l2.567-1.426Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-2" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M23.768 29.988a16 16 0 1 1 8.205-13.06l-2.93-.17a13.064 13.064 0 1 0-6.7 10.663l1.425 2.567Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-3" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M2.013 23.768a16 16 0 1 1 13.059 8.205l.17-2.93a13.064 13.064 0 1 0-10.663-6.7l-2.566 1.425Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-spinner-step-4" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M8.231 2.012a16 16 0 1 1-8.204 13.06l2.93.17a13.064 13.064 0 1 0 6.7-10.663L8.23 2.012Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-spreadsheet" viewBox="0 0 32 32">
     <path fill="currentColor" d="M4 25.347V6.63c0-.72.258-1.338.774-1.854A2.557 2.557 0 0 1 6.653 4H25.37c.72 0 1.338.258 1.854.775A2.53 2.53 0 0 1 28 6.629v18.706c0 .714-.258 1.336-.775 1.868-.516.531-1.134.797-1.854.797H6.653a2.558 2.558 0 0 1-1.879-.774A2.558 2.558 0 0 1 4 25.347Zm1.8-14.644h20.4V6.665a.842.842 0 0 0-.243-.622.842.842 0 0 0-.622-.244H6.665a.842.842 0 0 0-.622.244.842.842 0 0 0-.244.622v4.038Zm7.383 7.749h5.634v-5.95h-5.634v5.95Zm0 7.749h5.634v-5.95h-5.634v5.95Zm-7.384-7.75h5.62v-5.949h-5.62v5.95Zm14.806 0H26.2v-5.949h-5.596v5.95Zm-13.94 7.75h4.754v-5.95h-5.62v5.084c0 .253.081.46.244.622a.84.84 0 0 0 .622.244Zm13.94 0h4.73c.253 0 .46-.081.622-.244a.842.842 0 0 0 .244-.622v-5.084h-5.596v5.95Z"></path>
   </symbol>
@@ -472,6 +464,14 @@
     <path fill="currentColor" d="M11.627 29.59c-1.837 0-3.401-.652-4.692-1.956C5.645 26.33 5 24.759 5 22.922c0-1.594.512-3.002 1.536-4.226a6.506 6.506 0 0 1 3.882-2.282c.292-.068.562-.02.81.142.25.162.408.39.476.682a.986.986 0 0 1-.14.804c-.164.244-.391.4-.683.468a4.345 4.345 0 0 0-2.668 1.525 4.349 4.349 0 0 0-1.05 2.887c0 1.238.436 2.294 1.31 3.167.873.874 1.934 1.31 3.182 1.31 1.05 0 1.98-.323 2.79-.97a4.438 4.438 0 0 0 1.585-2.473c.092-.292.26-.517.504-.675a.907.907 0 0 1 .805-.099c.292.093.517.263.675.512.158.248.19.519.098.81a6.503 6.503 0 0 1-2.37 3.664 6.503 6.503 0 0 1-4.115 1.422ZM22.135 8.185a2.5 2.5 0 0 1-1.835-.757 2.5 2.5 0 0 1-.757-1.836 2.5 2.5 0 0 1 .757-1.835A2.5 2.5 0 0 1 22.135 3c.72 0 1.329.252 1.829.757s.75 1.116.75 1.835c0 .72-.25 1.331-.75 1.836a2.48 2.48 0 0 1-1.829.757Zm-6.322 13.35c-1.01 0-1.798-.434-2.36-1.303-.563-.869-.633-1.773-.21-2.712l2.806-6.188h-3.46l-.577 1.508a1.046 1.046 0 0 1-.525.581.963.963 0 0 1-.789.062 1.063 1.063 0 0 1-.659-.558.998.998 0 0 1-.029-.867l.558-1.505c.188-.488.482-.86.883-1.114a2.5 2.5 0 0 1 1.368-.38h6.54c.962 0 1.692.373 2.192 1.12.5.749.548 1.578.143 2.49l-2.78 6.08h4.885c.691 0 1.28.245 1.766.736.486.49.73 1.082.73 1.773v5.809c0 .307-.104.564-.311.77-.207.208-.464.311-.771.311s-.564-.103-.771-.31a1.046 1.046 0 0 1-.31-.771V21.84a.314.314 0 0 0-.077-.221c-.05-.056-.127-.084-.228-.084h-8.014Z"></path>
   </symbol>
 
+  <symbol id="qgds-icon-x" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M22.21 6.25h3.282l-7.219 8.297 8.532 11.203h-6.657l-5.25-6.797-5.953 6.797H5.617l7.735-8.813L5.195 6.25h6.844l4.688 6.234L22.21 6.25Zm-1.17 17.531h1.827L11.055 8.125h-1.97L21.04 23.781Z"></path>
+  </symbol>
+
+  <symbol id="qgds-icon-youtube" viewBox="0 0 32 32">
+    <path fill="currentColor" d="M28.258 9.86c.562 1.968.562 6.187.562 6.187s0 4.172-.562 6.187a3.127 3.127 0 0 1-2.25 2.25C23.992 25 16.023 25 16.023 25s-8.015 0-10.03-.516a3.127 3.127 0 0 1-2.25-2.25c-.563-2.015-.563-6.187-.563-6.187s0-4.219.562-6.188c.281-1.125 1.172-2.015 2.25-2.296C8.008 7 16.023 7 16.023 7s7.97 0 9.985.563c1.078.28 1.969 1.171 2.25 2.296Zm-14.86 9.984 6.657-3.797-6.657-3.797v7.594Z"></path>
+  </symbol>
+
   <symbol id="qgds-icon-zoom" viewBox="0 0 32 32">
     <path fill="currentColor" d="M11 13.05H8.78c-.295 0-.541-.1-.74-.3-.2-.2-.299-.448-.299-.744s.1-.542.299-.739c.199-.196.445-.295.74-.295H11V8.781c0-.295.1-.541.3-.74.2-.2.449-.299.745-.299s.542.1.739.299c.196.199.295.445.295.74v2.191h2.19c.295 0 .542.1.741.3.2.2.299.449.299.745s-.1.543-.299.74a1.013 1.013 0 0 1-.74.294h-2.191v2.219c0 .294-.1.541-.3.74-.201.2-.45.299-.745.299A1.013 1.013 0 0 1 11 15.269v-2.218Zm1.073 9.018c-2.815 0-5.198-.975-7.148-2.924C2.975 17.195 2 14.826 2 12.037c0-2.79.974-5.16 2.924-7.111C6.873 2.976 9.244 2 12.037 2c2.794 0 5.166.975 7.116 2.924 1.95 1.95 2.926 4.32 2.926 7.11a9.823 9.823 0 0 1-.596 3.385 9.62 9.62 0 0 1-1.676 2.924l9.889 9.845c.199.19.301.438.307.74.005.302-.097.556-.307.763-.21.206-.464.309-.76.309a.996.996 0 0 1-.748-.315l-9.862-9.861a8.99 8.99 0 0 1-2.87 1.657 9.935 9.935 0 0 1-3.383.587Zm-.017-2.079c2.217 0 4.096-.771 5.635-2.314C19.23 16.13 20 14.25 20 12.034c0-2.218-.77-4.098-2.31-5.64-1.538-1.544-3.417-2.316-5.634-2.316-2.227 0-4.113.772-5.659 2.315-1.546 1.543-2.319 3.423-2.319 5.64 0 2.218.773 4.098 2.32 5.642 1.545 1.543 3.431 2.314 5.658 2.314Z"></path>
   </symbol>

package/src/js/constants.js

@@ -0,0 +1,10 @@
+/**
+ * Media query breakpoints. These must be kept in sync with breakpoints defined in sass variables.
+ */
+export const breakpoints = {
+  xs: 0,
+  sm: 400,
+  md: 700,
+  lg: 992,
+  xl: 1312,
+};

package/src/js/qld.bootstrap.js

@@ -9,6 +9,7 @@ import {
 } from "./../components/bs5/video/video.functions";
 import { initializeNavbar } from "./../components/bs5/navbar/navbar.functions";
 import { initBreadcrumb } from "./../components/bs5/breadcrumbs/breadcrumbs.functions";
+import { initDateInput } from "../components/bs5/dateinput/dateinput.functions";
 import { initQuickexit } from "./../components/bs5/quickexit/quickexit.functions";
 //import { displayFeedbackForm } from "./../components/bs5/footer/footer.functions";
 import { toggleSearch } from "./../components/bs5/header/header.functions";
@@ -23,174 +24,121 @@ import { validateSkipLinks } from "./../components/bs5/skiplinks/skipLinks.funct
 
 window.addEventListener("click", initQuickexit, true);
 window.addEventListener("keydown", initQuickexit, true);
-
 window.addEventListener("DOMContentLoaded", () => {
-  (() => {
-    backToTop();
+  backToTop();
 
-    initTabsScroll();
+  initTabsScroll();
 
-    initGlobalAlerts();
+  initGlobalAlerts();
 
-    // Footer FormIO Action
-    // Note: This is added here, as there is an issue with breadcrumbShorten() function.
-    //       Will move this once that issue is fixed.
-    /*   
+  // Footer FormIO Action
+  // Note: This is added here, as there is an issue with breadcrumbShorten() function.
+  //       Will move this once that issue is fixed.
+  /*   
       const footerFormio = document.getElementById("qg-feedback-toggle");
       if (footerFormio) {
         displayFeedbackForm();
       }
    */
-    //Header search
-    let headerSearchButton = document.getElementById(
-      "qld-header-toggle-search-button",
-    );
-    if (headerSearchButton) {
-      headerSearchButton.addEventListener("click", toggleSearch);
-    }
-
-    // Get all forms with the class 'site-search'
-    let forms = document.querySelectorAll(".site-search");
-    forms.forEach((form) => {
-      // Get the search input within the current form
-      let searchInput = form.querySelector(".qld-search-input input");
-
-      if (searchInput) {
-        let timeout;
-
-        // Add keyup event listener to the search input
-        searchInput.addEventListener("input", function (e) {
-          clearTimeout(timeout);
-          timeout = setTimeout(() => {
-            const value = e.target.value.trim();
-            showSuggestions(value, value === "", form);
-          }, 300);
-        });
-
-        // Add focus event listener to the search input
-        searchInput.addEventListener("focus", function () {
-          const suggestions = form.querySelector(".suggestions");
-          const dynamicSuggestionsContainer = form.querySelector(
-            ".dynamic-suggestions",
-          );
-
-          if (this.value.trim() === "") {
-            showSuggestions("", true, form);
-          } else if (
-            suggestions &&
-            dynamicSuggestionsContainer &&
-            dynamicSuggestionsContainer.innerHTML.trim() !== ""
-          ) {
-            // Only show existing suggestions if there are actual dynamic suggestions populated
-            suggestions.classList.remove("d-none");
-          }
-        });
-
-        const suggestions = form.querySelector(".suggestions");
-        // If there is no suggestions renderred, do not add event listener to the document
-        if (suggestions) {
-          // Helper function to determine if suggestions should be hidden on focus change
-          const shouldHideSuggestions = (newFocusTarget) => {
-            if (!newFocusTarget) return true;
-
-            const isFocusInsideInput =
-              searchInput.contains(newFocusTarget) ||
-              searchInput === newFocusTarget;
-            const isFocusInsideSuggestions =
-              suggestions.contains(newFocusTarget);
-
-            return !isFocusInsideInput && !isFocusInsideSuggestions;
-          };
-
-          // Handle focusout event for keyboard accessibility
-          const handleFocusOut = (event) => {
-            const newFocusTarget = event.relatedTarget;
-
-            if (shouldHideSuggestions(newFocusTarget)) {
-              suggestions.classList.add("d-none");
-            }
-          };
-
-          // Attach focusout event listener to search input
-          searchInput.addEventListener("focusout", handleFocusOut);
-
-          // Attach focusout event listener to suggestions container
-          suggestions.addEventListener("focusout", handleFocusOut);
-        } else {
-          console.warn("Required suggestions elements not found.");
-        }
-
-        // Attach event listener to form submit
-        form.addEventListener("submit", function (event) {
-          event.preventDefault();
-          const query = searchInput.value.trim();
-          submitSearchForm(query, form);
-        });
-      }
-    });
-
-    //Header
-    // Get the <header> element
-    let header = document.querySelector("header");
-    if (header) {
-      // Get the current page URL without query string parameters
-      let url = window.location.origin + window.location.pathname;
-      // Set the data-page-url attribute on the <header> element
-      header.setAttribute("data-page-url", url);
-    }
-
-    // Navbar
-    initializeNavbar();
-
-    // Breadcrumb
-    initBreadcrumb();
-
-    // Quick exit
-    window.addEventListener("click", initQuickexit, true);
-    window.addEventListener("keydown", initQuickexit, true);
-    initQuickexit();
-
-    // Accordion
-    let accordionToggleButton = document.querySelectorAll(
-      ".accordion-toggle-btn",
-    );
-
-    accordionToggleButton.forEach(function (toggleButton) {
-      toggleButton.addEventListener("click", accordionToggleAll);
-
-      let accordionButtons = toggleButton
-        .closest(".accordion-group")
-        .querySelectorAll(".accordion-button");
+  //Header search
+  let headerSearchButton = document.getElementById(
+    "qld-header-toggle-search-button",
+  );
+  if (headerSearchButton) {
+    headerSearchButton.addEventListener("click", toggleSearch);
+  }
+
+  // Get all forms with the class 'site-search'
+  let forms = document.querySelectorAll(".site-search");
+
+  forms.forEach((form) => {
+    // Get the search input within the current form
+    let searchInput = form.querySelector(".qld-search-input input");
+
+    if (searchInput) {
+      let timeout;
+
+      // Add keyup event listener to the search input
+      searchInput.addEventListener("input", function (e) {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          const value = e.target.value.trim();
+          showSuggestions(value, value === "", form);
+        }, 300);
+      });
 
-      accordionButtons.forEach(function (button) {
-        button.addEventListener("click", accordionToggleAllButtonState);
+      // Attach event listener to form submit
+      form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        const query = searchInput.value.trim();
+        submitSearchForm(query, form);
       });
+    }
+  });
+
+  //Header
+  // Get the <header> element
+  let header = document.querySelector("header");
+  if (header) {
+    // Get the current page URL without query string parameters
+    let url = window.location.origin + window.location.pathname;
+    // Set the data-page-url attribute on the <header> element
+    header.setAttribute("data-page-url", url);
+  }
+
+  // Navbar
+  initializeNavbar();
+
+  // Breadcrumb
+  initBreadcrumb();
+
+  // Quick exit
+  window.addEventListener("click", initQuickexit, true);
+  window.addEventListener("keydown", initQuickexit, true);
+  initQuickexit();
+
+  // Accordion
+  let accordionToggleButton = document.querySelectorAll(
+    ".accordion-toggle-btn",
+  );
+
+  accordionToggleButton.forEach(function (toggleButton) {
+    toggleButton.addEventListener("click", accordionToggleAll);
+
+    let accordionButtons = toggleButton
+      .closest(".accordion-group")
+      .querySelectorAll(".accordion-button");
+
+    accordionButtons.forEach(function (button) {
+      button.addEventListener("click", accordionToggleAllButtonState);
     });
+  });
 
-    let inPageLinks = document.querySelectorAll('a[href^="#"]');
+  let inPageLinks = document.querySelectorAll('a[href^="#"]');
 
-    accordionHashLinks();
-    window.onhashchange = accordionHashLinks;
-    inPageLinks.forEach(function (link) {
-      link.addEventListener("click", accordionHashLinks);
-    });
+  accordionHashLinks();
+  window.onhashchange = accordionHashLinks;
+  inPageLinks.forEach(function (link) {
+    link.addEventListener("click", accordionHashLinks);
+  });
 
-    // Video
-    let videoThumbnails = document.querySelectorAll(".video-thumbnail");
+  // Video
+  let videoThumbnails = document.querySelectorAll(".video-thumbnail");
 
-    videoThumbnails.forEach(function (thumbnail) {
-      thumbnail.addEventListener("click", videoEmbedPlay);
-    });
+  videoThumbnails.forEach(function (thumbnail) {
+    thumbnail.addEventListener("click", videoEmbedPlay);
+  });
 
-    let videoTranscripts = document.querySelectorAll(
-      ".video .accordion .accordion-button",
-    );
+  let videoTranscripts = document.querySelectorAll(
+    ".video .accordion .accordion-button",
+  );
 
-    videoTranscripts.forEach(function (transcript) {
-      transcript.addEventListener("click", videoTranscriptTitle);
-    });
+  videoTranscripts.forEach(function (transcript) {
+    transcript.addEventListener("click", videoTranscriptTitle);
+  });
+
+  initDateInput();
 
-    // Skip Links
-    validateSkipLinks();
-  })();
+  // Skip Links
+  validateSkipLinks();
 });

package/src/js/utils.js

@@ -186,6 +186,8 @@ export function createFocusTrap(container, options = {}) {
     activate,
     deactivate,
     update: updateFocusableElements,
-    isActive: () => isActive,
+    get isActive() {
+      return isActive;
+    },
   };
 }