@ministryofjustice/hmpps-connect-dps-shared-items 4.4.0 → 5.0.0

package/dist/assets/dps/components/address-autosuggest/index.js

@@ -1,10 +1,11 @@
-import { AutosuggestAddress } from './autosuggest-address'
+import { AutosuggestAddress } from './autosuggest-address.js';
 
-export function init() {
-  // Setup all address autosuggest instances:
-  const addressAutosuggests = [...document.querySelectorAll('.hmpps-js-address-autosuggest')]
-
-  if (addressAutosuggests.length) {
-    addressAutosuggests.forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest))
-  }
+function init() {
+    // Setup all address autosuggest instances:
+    const addressAutosuggests = [...document.querySelectorAll('.hmpps-js-address-autosuggest')];
+    if (addressAutosuggests.length) {
+        addressAutosuggests.forEach(addressAutosuggest => new AutosuggestAddress(addressAutosuggest));
+    }
 }
+
+export { init };

package/dist/assets/dps/components/alert-flag/_alert-flag.scss

@@ -1,4 +1,6 @@
+@use "sass:color";
 @use "sass:selector";
+@use "govuk-frontend/dist/govuk/helpers/colour";
 
 @mixin unify-parent($child) {
   @at-root #{selector.unify(&, $child)} {
@@ -20,7 +22,7 @@
   }
 
   @media print {
-    margin-bottom: 0px !important;
+    margin-bottom: 0 !important;
     font-size: 12px;
     color: black !important;
     border: none !important;
@@ -44,7 +46,7 @@
     }
 
     &:focus {
-      box-shadow: 0 0 0 3px $govuk-focus-colour;
+      box-shadow: 0 0 0 3px colour.govuk-functional-colour(focus);
     }
   }
 }
@@ -186,7 +188,7 @@
   }
 
   &--reverse-cohorting-unit {
-    @include alertType(mix(white, #00703c, 20%));
+    @include alertType(color.mix(white, #00703c, 20%));
   }
 
   &--protective-isolation-unit {
@@ -220,4 +222,3 @@
     min-height: 30px;
   }
 }
-

package/dist/assets/dps/components/alert-flag/macro.njk

@@ -13,4 +13,4 @@
             {{ alertData.alert.label }}
         </div>
     {% endif %}
-{% endmacro %}
+{% endmacro %}

package/dist/assets/dps/components/modal/_index.scss

@@ -0,0 +1,148 @@
+@use "sass:math";
+@use "govuk-frontend/dist/govuk/helpers/colour";
+@use "govuk-frontend/dist/govuk/helpers/typography";
+@use "govuk-frontend/dist/govuk/settings/measurements";
+
+.hmpps-modal {
+  display: flex;
+  z-index: 2;
+
+  &[hidden] {
+    display: none !important;
+  }
+}
+
+.hmpps-modal, .hmpps-modal__backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.hmpps-modal__backdrop {
+  background: rgb(colour.govuk-colour("black"), 0.6);
+}
+
+.hmpps-modal__dialogue-box {
+  display: block;
+  padding: 0;
+  margin: auto;
+  min-width: 400px;
+  max-width: 800px;
+  min-height: 300px;
+  max-height: 90vh;
+  z-index: 2;
+  position: relative;
+  background: colour.govuk-colour("white");
+  border: 3px solid colour.govuk-colour("black");
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px colour.govuk-functional-colour(focus);
+  }
+
+  header {
+    display: flex;
+    gap: 20px;
+    justify-content: space-between;
+    align-items: center;
+    background: colour.govuk-colour("black");
+    color: colour.govuk-colour("white");
+    margin-top: 0;
+    padding: 0 0 0 measurements.$govuk-gutter;
+    height: 45px;
+
+    h1 {
+      @include typography.govuk-font($size: 19, $weight: "bold");
+      margin: 0;
+    }
+  }
+}
+
+.hmpps-modal__close-button {
+  all: unset;
+  appearance: none;
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  padding-top: 3px;
+  margin-top: -3px;
+  cursor: pointer;
+  background: colour.govuk-colour("black");
+  color: colour.govuk-colour("white");
+
+  &:hover, &:focus {
+    background: colour.govuk-functional-colour(focus);
+    color: colour.govuk-colour("black");
+
+    @media (forced-colors: active) and (prefers-color-scheme: dark) {
+      background: colour.govuk-colour("black");
+      color: colour.govuk-colour("yellow");
+    }
+  }
+}
+
+.hmpps-modal__content {
+  $height: 300px;
+  $buffer: 70px;
+  padding: measurements.$govuk-gutter-half measurements.$govuk-gutter 0 measurements.$govuk-gutter;
+  max-height: calc(90vh - #{$buffer});
+  min-height: #{$height - $buffer};
+  overflow: auto;
+
+  .hmpps-modal__loading-graphic {
+    width: 50px;
+    display: block;
+    margin: #{math.div($height, 2) - $buffer} auto auto;
+
+    g {
+      animation: hmpps-modal__loading-graphic-animation 1s step-end infinite;
+      transform-origin: center;
+      fill: colour.govuk-colour("black");
+
+      @media (forced-colors: active) and (prefers-color-scheme: dark) {
+        fill: colour.govuk-colour("white");
+      }
+    }
+  }
+}
+
+@keyframes hmpps-modal__loading-graphic-animation {
+  8.3% {
+    transform: rotate(30deg)
+  }
+  16.6% {
+    transform: rotate(60deg)
+  }
+  25% {
+    transform: rotate(90deg)
+  }
+  33.3% {
+    transform: rotate(120deg)
+  }
+  41.6% {
+    transform: rotate(150deg)
+  }
+  50% {
+    transform: rotate(180deg)
+  }
+  58.3% {
+    transform: rotate(210deg)
+  }
+  66.6% {
+    transform: rotate(240deg)
+  }
+  75% {
+    transform: rotate(270deg)
+  }
+  83.3% {
+    transform: rotate(300deg)
+  }
+  91.6% {
+    transform: rotate(330deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}

package/dist/assets/dps/components/modal/index.js

@@ -0,0 +1,171 @@
+/* eslint-disable import/prefer-default-export, @stylistic/lines-between-class-members */
+/** Modal dialogue box component */
+class Modal {
+    root;
+    static showTriggerClassName = 'hmpps-modal__trigger-show';
+    static hideTriggerClassName = 'hmpps-modal__trigger-hide';
+    static modals = new Map();
+    /** Initialise all modal components rendered in the document; none will automatically open */
+    static init() {
+        document.querySelectorAll('[data-module="hmpps-modal"]').forEach(element => {
+            const modal = new this(element);
+            this.modals.set(modal.id, modal);
+        });
+        document.querySelectorAll(`.${this.showTriggerClassName}`).forEach(element => {
+            const modalId = element.dataset.hmppsModalId;
+            if (modalId) {
+                element.addEventListener('click', event => {
+                    const modal = this.modals.get(modalId);
+                    if (modal) {
+                        event.preventDefault();
+                        if (element.dataset.hmppsModalUrl) {
+                            modal.load(element.dataset.hmppsModalUrl);
+                        }
+                        else {
+                            modal.show();
+                        }
+                    }
+                });
+            }
+        });
+    }
+    /** Find an instance of the `Modal` class to programmatically control it */
+    static getById(modalId) {
+        return this.modals.get(modalId);
+    }
+    /** Hide all showing modals */
+    static hideAll() {
+        this.modals.forEach(modal => {
+            if (modal.isShowing) {
+                modal.hide();
+            }
+        });
+    }
+    dialog;
+    content;
+    showing;
+    constructor(root) {
+        this.root = root;
+        this.root.hidden = true;
+        this.showing = false;
+        this.dialog = root.querySelector('.hmpps-modal__dialogue-box');
+        this.content = root.querySelector('.hmpps-modal__content');
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.maintainFocus = this.maintainFocus.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
+        this.attachHideTriggers(this.root.querySelectorAll(`.${Modal.hideTriggerClassName}`));
+    }
+    get id() {
+        return this.root.id;
+    }
+    get isShowing() {
+        return this.showing;
+    }
+    attachHideTriggers(elements) {
+        elements.forEach(element => element.addEventListener('click', event => {
+            this.hide();
+            event.preventDefault();
+        }));
+    }
+    handleKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.hide();
+        }
+        else if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    previouslyFocused;
+    takeFocus() {
+        if (document.activeElement) {
+            this.previouslyFocused = document.activeElement;
+        }
+        this.dialog.focus();
+    }
+    maintainFocus(event) {
+        const isInModal = event.target?.closest('[aria-modal="true"]');
+        if (!isInModal) {
+            this.takeFocus();
+        }
+    }
+    revertFocus() {
+        if (this.previouslyFocused && this.previouslyFocused.focus) {
+            this.previouslyFocused.focus();
+        }
+    }
+    trapFocus(event) {
+        const focusableChildren = this.getFocusableChildren();
+        if (focusableChildren.length === 0) {
+            event.preventDefault();
+            return;
+        }
+        const focusedItemIndex = focusableChildren.indexOf(document.activeElement);
+        const lastIndex = focusableChildren.length - 1;
+        if (event.shiftKey && focusedItemIndex === 0) {
+            focusableChildren[lastIndex].focus();
+            event.preventDefault();
+        }
+        else if (!event.shiftKey && focusedItemIndex === lastIndex) {
+            focusableChildren[0].focus();
+            event.preventDefault();
+        }
+    }
+    getFocusableChildren() {
+        return Array.from(this.root.querySelectorAll(`
+        a[href]:not([disabled]),
+        button:not([disabled]),
+        textarea:not([disabled]),
+        input[type="text"]:not([disabled]),
+        input[type="radio"]:not([disabled]),
+        input[type="checkbox"]:not([disabled]),
+        select:not([disabled])
+      `)).filter(element => element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+    }
+    /** Show the modal dialog box */
+    show() {
+        Modal.hideAll();
+        this.root.removeAttribute('hidden');
+        this.dialog.ariaModal = 'true';
+        this.takeFocus();
+        document.addEventListener('keydown', this.handleKeyDown);
+        document.body.addEventListener('focus', this.maintainFocus, true);
+        document.documentElement.style.overflowY = 'hidden';
+        this.showing = true;
+    }
+    /** Hide the modal dialog box */
+    hide() {
+        this.root.hidden = true;
+        this.dialog.removeAttribute('aria-modal');
+        document.removeEventListener('keydown', this.handleKeyDown);
+        document.body.removeEventListener('focus', this.maintainFocus, true);
+        this.revertFocus();
+        document.documentElement.style.overflowY = '';
+        this.showing = false;
+    }
+    /** Show modal dialog box with loading graphic while loading HTML content from `url` */
+    async load(url) {
+        this.replaceContentWithTemplate('loading-graphic');
+        this.show();
+        try {
+            const response = await fetch(url);
+            if (response?.ok) {
+                this.content.innerHTML = await response.text();
+                this.attachHideTriggers(this.content.querySelectorAll(`.${Modal.hideTriggerClassName}`));
+            }
+            else {
+                this.replaceContentWithTemplate('error-message');
+            }
+        }
+        catch {
+            this.replaceContentWithTemplate('error-message');
+        }
+    }
+    replaceContentWithTemplate(template) {
+        this.content.replaceChildren();
+        const loadingGraphic = document.importNode(this.root.querySelector(`.hmpps-modal__${template}-template`).content, true);
+        this.content.appendChild(loadingGraphic);
+    }
+}
+
+export { Modal };

package/dist/assets/dps/components/modal/index.ts

@@ -0,0 +1,203 @@
+/* eslint-disable import/prefer-default-export, @stylistic/lines-between-class-members */
+
+/** Modal dialogue box component */
+export class Modal {
+  public static readonly showTriggerClassName = 'hmpps-modal__trigger-show'
+  public static readonly hideTriggerClassName = 'hmpps-modal__trigger-hide'
+
+  private static readonly modals = new Map<string, Modal>()
+
+  /** Initialise all modal components rendered in the document; none will automatically open */
+  public static init(): void {
+    document.querySelectorAll<HTMLDivElement>('[data-module="hmpps-modal"]').forEach(element => {
+      const modal = new this(element)
+      this.modals.set(modal.id, modal)
+    })
+    document.querySelectorAll<HTMLElement>(`.${this.showTriggerClassName}`).forEach(element => {
+      const modalId = element.dataset.hmppsModalId
+      if (modalId) {
+        element.addEventListener('click', event => {
+          const modal = this.modals.get(modalId)
+          if (modal) {
+            event.preventDefault()
+            if (element.dataset.hmppsModalUrl) {
+              modal.load(element.dataset.hmppsModalUrl)
+            } else {
+              modal.show()
+            }
+          }
+        })
+      }
+    })
+  }
+
+  /** Find an instance of the `Modal` class to programmatically control it */
+  public static getById(modalId: string): Modal | undefined {
+    return this.modals.get(modalId)
+  }
+
+  /** Hide all showing modals */
+  public static hideAll(): void {
+    this.modals.forEach(modal => {
+      if (modal.isShowing) {
+        modal.hide()
+      }
+    })
+  }
+
+  private readonly dialog: HTMLDialogElement
+  private readonly content: HTMLElement
+  private showing: boolean
+
+  constructor(private readonly root: HTMLDivElement) {
+    this.root.hidden = true
+    this.showing = false
+
+    this.dialog = root.querySelector('.hmpps-modal__dialogue-box')!
+    this.content = root.querySelector('.hmpps-modal__content')!
+
+    this.show = this.show.bind(this)
+    this.hide = this.hide.bind(this)
+    this.maintainFocus = this.maintainFocus.bind(this)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+
+    this.attachHideTriggers(this.root.querySelectorAll(`.${Modal.hideTriggerClassName}`))
+  }
+
+  public get id(): string {
+    return this.root.id
+  }
+
+  public get isShowing(): boolean {
+    return this.showing
+  }
+
+  private attachHideTriggers(elements: { forEach: (callback: (element: HTMLElement) => void) => void }): void {
+    elements.forEach(element =>
+      element.addEventListener('click', event => {
+        this.hide()
+        event.preventDefault()
+      }),
+    )
+  }
+
+  private handleKeyDown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      this.hide()
+    } else if (event.key === 'Tab') {
+      this.trapFocus(event)
+    }
+  }
+
+  private previouslyFocused: HTMLElement | undefined
+
+  private takeFocus(): void {
+    if (document.activeElement) {
+      this.previouslyFocused = document.activeElement as HTMLElement
+    }
+    this.dialog.focus()
+  }
+
+  private maintainFocus(event: FocusEvent): void {
+    const isInModal = (event.target as HTMLElement)?.closest('[aria-modal="true"]')
+    if (!isInModal) {
+      this.takeFocus()
+    }
+  }
+
+  private revertFocus(): void {
+    if (this.previouslyFocused && this.previouslyFocused.focus) {
+      this.previouslyFocused.focus()
+    }
+  }
+
+  private trapFocus(event: KeyboardEvent): void {
+    const focusableChildren = this.getFocusableChildren()
+    if (focusableChildren.length === 0) {
+      event.preventDefault()
+      return
+    }
+    const focusedItemIndex = focusableChildren.indexOf(document.activeElement as HTMLElement)
+    const lastIndex = focusableChildren.length - 1
+
+    if (event.shiftKey && focusedItemIndex === 0) {
+      focusableChildren[lastIndex].focus()
+      event.preventDefault()
+    } else if (!event.shiftKey && focusedItemIndex === lastIndex) {
+      focusableChildren[0].focus()
+      event.preventDefault()
+    }
+  }
+
+  private getFocusableChildren(): HTMLElement[] {
+    return Array.from(
+      this.root.querySelectorAll<HTMLElement>(`
+        a[href]:not([disabled]),
+        button:not([disabled]),
+        textarea:not([disabled]),
+        input[type="text"]:not([disabled]),
+        input[type="radio"]:not([disabled]),
+        input[type="checkbox"]:not([disabled]),
+        select:not([disabled])
+      `),
+    ).filter(element => element.offsetWidth || element.offsetHeight || element.getClientRects().length)
+  }
+
+  /** Show the modal dialog box */
+  public show(): void {
+    Modal.hideAll()
+
+    this.root.removeAttribute('hidden')
+    this.dialog.ariaModal = 'true'
+
+    this.takeFocus()
+
+    document.addEventListener('keydown', this.handleKeyDown)
+    document.body.addEventListener('focus', this.maintainFocus, true)
+
+    document.documentElement.style.overflowY = 'hidden'
+
+    this.showing = true
+  }
+
+  /** Hide the modal dialog box */
+  public hide(): void {
+    this.root.hidden = true
+    this.dialog.removeAttribute('aria-modal')
+
+    document.removeEventListener('keydown', this.handleKeyDown)
+    document.body.removeEventListener('focus', this.maintainFocus, true)
+
+    this.revertFocus()
+
+    document.documentElement.style.overflowY = ''
+
+    this.showing = false
+  }
+
+  /** Show modal dialog box with loading graphic while loading HTML content from `url` */
+  public async load(url: string | URL): Promise<void> {
+    this.replaceContentWithTemplate('loading-graphic')
+    this.show()
+    try {
+      const response = await fetch(url)
+      if (response?.ok) {
+        this.content.innerHTML = await response.text()
+        this.attachHideTriggers(this.content.querySelectorAll(`.${Modal.hideTriggerClassName}`))
+      } else {
+        this.replaceContentWithTemplate('error-message')
+      }
+    } catch {
+      this.replaceContentWithTemplate('error-message')
+    }
+  }
+
+  private replaceContentWithTemplate(template: 'error-message' | 'loading-graphic'): void {
+    this.content.replaceChildren()
+    const loadingGraphic = document.importNode(
+      this.root.querySelector<HTMLTemplateElement>(`.hmpps-modal__${template}-template`)!.content,
+      true,
+    )
+    this.content.appendChild(loadingGraphic)
+  }
+}

package/dist/assets/dps/components/modal/macro.njk

@@ -0,0 +1,48 @@
+{#
+Parameters as JSDoc:
+/**
+ * @param {Object} [params]
+ * @param {string} params.id - The id attribute added to the component’s wrapper element.
+ *                             This id is needed to lookup or trigger the modal to show.
+ * @param {string} params.title - The dialogue box’s title.
+ * @param {string} [params.classes] - Optional classes to add to the component’s container element.
+ */
+#}
+{% macro hmppsModal(params) %}
+  <div id="{{ params.id }}" class="hmpps-modal {{ params.classes }}" data-module="hmpps-modal" hidden>
+    <div class="hmpps-modal__backdrop hmpps-modal__trigger-hide"></div>
+    <dialog class="hmpps-modal__dialogue-box" tabindex="0">
+      <header>
+        <h1 id="{{ params.id }}-modal-title">{{ params.title }}</h1>
+        <button class="hmpps-modal__close-button hmpps-modal__trigger-hide" aria-label="Close">
+          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+            <path d="M18 3.405 14.595 0 9 5.595 3.405 0 0 3.406 5.595 9 0 14.594 3.406 18 9 12.406 14.595 18 18 14.595 12.405 9Z" fill="currentColor"/>
+          </svg>
+        </button>
+      </header>
+      <section class="hmpps-modal__content">
+        {% if caller %}
+          {{ caller() }}
+        {% endif %}
+      </section>
+    </dialog>
+
+    <template class="hmpps-modal__loading-graphic-template">
+      <svg class="hmpps-modal__loading-graphic" width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <g>
+          <rect x="11" y="1" width="2" height="5" opacity=".14"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(30 12 12)" opacity=".29"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(60 12 12)" opacity=".43"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(90 12 12)" opacity=".57"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(120 12 12)" opacity=".71"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(150 12 12)" opacity=".86"/>
+          <rect x="11" y="1" width="2" height="5" transform="rotate(180 12 12)"/>
+        </g>
+      </svg>
+    </template>
+    <template class="hmpps-modal__error-message-template">
+      <h2 class="govuk-heading-s">Something went wrong</h2>
+      <p>The error has been logged. Please try again.</p>
+    </template>
+  </div>
+{% endmacro %}