govuk_publishing_components 58.1.1 → 59.0.0

data/node_modules/choices.js/src/scripts/components/container.ts

@@ -0,0 +1,157 @@
+import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
+import { ClassNames } from '../interfaces/class-names';
+import { PositionOptionsType } from '../interfaces/position-options-type';
+import { PassedElementType, PassedElementTypes } from '../interfaces/passed-element-type';
+
+export default class Container {
+  element: HTMLElement;
+
+  type: PassedElementType;
+
+  classNames: ClassNames;
+
+  position: PositionOptionsType;
+
+  isOpen: boolean;
+
+  isFlipped: boolean;
+
+  isDisabled: boolean;
+
+  isLoading: boolean;
+
+  constructor({
+    element,
+    type,
+    classNames,
+    position,
+  }: {
+    element: HTMLElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+    position: PositionOptionsType;
+  }) {
+    this.element = element;
+    this.classNames = classNames;
+    this.type = type;
+    this.position = position;
+    this.isOpen = false;
+    this.isFlipped = false;
+    this.isDisabled = false;
+    this.isLoading = false;
+  }
+
+  /**
+   * Determine whether container should be flipped based on passed
+   * dropdown position
+   */
+  shouldFlip(dropdownPos: number, dropdownHeight: number): boolean {
+    // If flip is enabled and the dropdown bottom position is
+    // greater than the window height flip the dropdown.
+    let shouldFlip = false;
+    if (this.position === 'auto') {
+      shouldFlip =
+        this.element.getBoundingClientRect().top - dropdownHeight >= 0 &&
+        !window.matchMedia(`(min-height: ${dropdownPos + 1}px)`).matches;
+    } else if (this.position === 'top') {
+      shouldFlip = true;
+    }
+
+    return shouldFlip;
+  }
+
+  setActiveDescendant(activeDescendantID: string): void {
+    this.element.setAttribute('aria-activedescendant', activeDescendantID);
+  }
+
+  removeActiveDescendant(): void {
+    this.element.removeAttribute('aria-activedescendant');
+  }
+
+  open(dropdownPos: number, dropdownHeight: number): void {
+    addClassesToElement(this.element, this.classNames.openState);
+    this.element.setAttribute('aria-expanded', 'true');
+    this.isOpen = true;
+
+    if (this.shouldFlip(dropdownPos, dropdownHeight)) {
+      addClassesToElement(this.element, this.classNames.flippedState);
+      this.isFlipped = true;
+    }
+  }
+
+  close(): void {
+    removeClassesFromElement(this.element, this.classNames.openState);
+    this.element.setAttribute('aria-expanded', 'false');
+    this.removeActiveDescendant();
+    this.isOpen = false;
+
+    // A dropdown flips if it does not have space within the page
+    if (this.isFlipped) {
+      removeClassesFromElement(this.element, this.classNames.flippedState);
+      this.isFlipped = false;
+    }
+  }
+
+  addFocusState(): void {
+    addClassesToElement(this.element, this.classNames.focusState);
+  }
+
+  removeFocusState(): void {
+    removeClassesFromElement(this.element, this.classNames.focusState);
+  }
+
+  enable(): void {
+    removeClassesFromElement(this.element, this.classNames.disabledState);
+    this.element.removeAttribute('aria-disabled');
+    if (this.type === PassedElementTypes.SelectOne) {
+      this.element.setAttribute('tabindex', '0');
+    }
+    this.isDisabled = false;
+  }
+
+  disable(): void {
+    addClassesToElement(this.element, this.classNames.disabledState);
+    this.element.setAttribute('aria-disabled', 'true');
+    if (this.type === PassedElementTypes.SelectOne) {
+      this.element.setAttribute('tabindex', '-1');
+    }
+    this.isDisabled = true;
+  }
+
+  wrap(element: HTMLElement): void {
+    const el = this.element;
+    const { parentNode } = element;
+    if (parentNode) {
+      if (element.nextSibling) {
+        parentNode.insertBefore(el, element.nextSibling);
+      } else {
+        parentNode.appendChild(el);
+      }
+    }
+
+    el.appendChild(element);
+  }
+
+  unwrap(element: HTMLElement): void {
+    const el = this.element;
+    const { parentNode } = el;
+    if (parentNode) {
+      // Move passed element outside this element
+      parentNode.insertBefore(element, el);
+      // Remove this element
+      parentNode.removeChild(el);
+    }
+  }
+
+  addLoadingState(): void {
+    addClassesToElement(this.element, this.classNames.loadingState);
+    this.element.setAttribute('aria-busy', 'true');
+    this.isLoading = true;
+  }
+
+  removeLoadingState(): void {
+    removeClassesFromElement(this.element, this.classNames.loadingState);
+    this.element.removeAttribute('aria-busy');
+    this.isLoading = false;
+  }
+}

data/node_modules/choices.js/src/scripts/components/dropdown.ts

@@ -0,0 +1,50 @@
+import { ClassNames } from '../interfaces/class-names';
+import { PassedElementType } from '../interfaces/passed-element-type';
+import { addClassesToElement, removeClassesFromElement } from '../lib/utils';
+
+export default class Dropdown {
+  element: HTMLElement;
+
+  type: PassedElementType;
+
+  classNames: ClassNames;
+
+  isActive: boolean;
+
+  constructor({
+    element,
+    type,
+    classNames,
+  }: {
+    element: HTMLElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+  }) {
+    this.element = element;
+    this.classNames = classNames;
+    this.type = type;
+    this.isActive = false;
+  }
+
+  /**
+   * Show dropdown to user by adding active state class
+   */
+  show(): this {
+    addClassesToElement(this.element, this.classNames.activeState);
+    this.element.setAttribute('aria-expanded', 'true');
+    this.isActive = true;
+
+    return this;
+  }
+
+  /**
+   * Hide dropdown from user
+   */
+  hide(): this {
+    removeClassesFromElement(this.element, this.classNames.activeState);
+    this.element.setAttribute('aria-expanded', 'false');
+    this.isActive = false;
+
+    return this;
+  }
+}

data/node_modules/choices.js/src/scripts/components/index.ts

@@ -0,0 +1,8 @@
+import Dropdown from './dropdown';
+import Container from './container';
+import Input from './input';
+import List from './list';
+import WrappedInput from './wrapped-input';
+import WrappedSelect from './wrapped-select';
+
+export { Dropdown, Container, Input, List, WrappedInput, WrappedSelect };

data/node_modules/choices.js/src/scripts/components/input.ts

@@ -0,0 +1,146 @@
+import { ClassNames } from '../interfaces/class-names';
+import { PassedElementType, PassedElementTypes } from '../interfaces/passed-element-type';
+
+export default class Input {
+  element: HTMLInputElement;
+
+  type: PassedElementType;
+
+  classNames: ClassNames;
+
+  preventPaste: boolean;
+
+  isFocussed: boolean;
+
+  isDisabled: boolean;
+
+  constructor({
+    element,
+    type,
+    classNames,
+    preventPaste,
+  }: {
+    element: HTMLInputElement;
+    type: PassedElementType;
+    classNames: ClassNames;
+    preventPaste: boolean;
+  }) {
+    this.element = element;
+    this.type = type;
+    this.classNames = classNames;
+    this.preventPaste = preventPaste;
+
+    this.isFocussed = this.element.isEqualNode(document.activeElement);
+    this.isDisabled = element.disabled;
+    this._onPaste = this._onPaste.bind(this);
+    this._onInput = this._onInput.bind(this);
+    this._onFocus = this._onFocus.bind(this);
+    this._onBlur = this._onBlur.bind(this);
+  }
+
+  set placeholder(placeholder: string) {
+    this.element.placeholder = placeholder;
+  }
+
+  get value(): string {
+    return this.element.value;
+  }
+
+  set value(value: string) {
+    this.element.value = value;
+  }
+
+  addEventListeners(): void {
+    const el = this.element;
+    el.addEventListener('paste', this._onPaste);
+    el.addEventListener('input', this._onInput, {
+      passive: true,
+    });
+    el.addEventListener('focus', this._onFocus, {
+      passive: true,
+    });
+    el.addEventListener('blur', this._onBlur, {
+      passive: true,
+    });
+  }
+
+  removeEventListeners(): void {
+    const el = this.element;
+    el.removeEventListener('input', this._onInput);
+    el.removeEventListener('paste', this._onPaste);
+    el.removeEventListener('focus', this._onFocus);
+    el.removeEventListener('blur', this._onBlur);
+  }
+
+  enable(): void {
+    const el = this.element;
+    el.removeAttribute('disabled');
+    this.isDisabled = false;
+  }
+
+  disable(): void {
+    const el = this.element;
+    el.setAttribute('disabled', '');
+    this.isDisabled = true;
+  }
+
+  focus(): void {
+    if (!this.isFocussed) {
+      this.element.focus();
+    }
+  }
+
+  blur(): void {
+    if (this.isFocussed) {
+      this.element.blur();
+    }
+  }
+
+  clear(setWidth = true): this {
+    this.element.value = '';
+    if (setWidth) {
+      this.setWidth();
+    }
+
+    return this;
+  }
+
+  /**
+   * Set the correct input width based on placeholder
+   * value or input value
+   */
+  setWidth(): void {
+    // Resize input to contents or placeholder
+    const { element } = this;
+    element.style.minWidth = `${element.placeholder.length + 1}ch`;
+    element.style.width = `${element.value.length + 1}ch`;
+  }
+
+  setActiveDescendant(activeDescendantID: string): void {
+    this.element.setAttribute('aria-activedescendant', activeDescendantID);
+  }
+
+  removeActiveDescendant(): void {
+    this.element.removeAttribute('aria-activedescendant');
+  }
+
+  _onInput(): void {
+    if (this.type !== PassedElementTypes.SelectOne) {
+      this.setWidth();
+    }
+  }
+
+  _onPaste(event: ClipboardEvent): void {
+    if (this.preventPaste) {
+      event.preventDefault();
+    }
+  }
+
+  _onFocus(): void {
+    this.isFocussed = true;
+  }
+
+  _onBlur(): void {
+    this.isFocussed = false;
+  }
+}

data/node_modules/choices.js/src/scripts/components/list.ts

@@ -0,0 +1,89 @@
+import { SCROLLING_SPEED } from '../constants';
+
+export default class List {
+  element: HTMLElement;
+
+  scrollPos: number;
+
+  height: number;
+
+  constructor({ element }: { element: HTMLElement }) {
+    this.element = element;
+    this.scrollPos = this.element.scrollTop;
+    this.height = this.element.offsetHeight;
+  }
+
+  prepend(node: Element | DocumentFragment): void {
+    const child = this.element.firstElementChild;
+    if (child) {
+      this.element.insertBefore(node, child);
+    } else {
+      this.element.append(node);
+    }
+  }
+
+  scrollToTop(): void {
+    this.element.scrollTop = 0;
+  }
+
+  scrollToChildElement(element: HTMLElement, direction: 1 | -1): void {
+    if (!element) {
+      return;
+    }
+
+    const listHeight = this.element.offsetHeight;
+    // Scroll position of dropdown
+    const listScrollPosition = this.element.scrollTop + listHeight;
+
+    const elementHeight = element.offsetHeight;
+    // Distance from bottom of element to top of parent
+    const elementPos = element.offsetTop + elementHeight;
+
+    // Difference between the element and scroll position
+    const destination = direction > 0 ? this.element.scrollTop + elementPos - listScrollPosition : element.offsetTop;
+
+    requestAnimationFrame(() => {
+      this._animateScroll(destination, direction);
+    });
+  }
+
+  _scrollDown(scrollPos: number, strength: number, destination: number): void {
+    const easing = (destination - scrollPos) / strength;
+    const distance = easing > 1 ? easing : 1;
+
+    this.element.scrollTop = scrollPos + distance;
+  }
+
+  _scrollUp(scrollPos: number, strength: number, destination: number): void {
+    const easing = (scrollPos - destination) / strength;
+    const distance = easing > 1 ? easing : 1;
+
+    this.element.scrollTop = scrollPos - distance;
+  }
+
+  _animateScroll(destination: number, direction: number): void {
+    const strength = SCROLLING_SPEED;
+    const choiceListScrollTop = this.element.scrollTop;
+    let continueAnimation = false;
+
+    if (direction > 0) {
+      this._scrollDown(choiceListScrollTop, strength, destination);
+
+      if (choiceListScrollTop < destination) {
+        continueAnimation = true;
+      }
+    } else {
+      this._scrollUp(choiceListScrollTop, strength, destination);
+
+      if (choiceListScrollTop > destination) {
+        continueAnimation = true;
+      }
+    }
+
+    if (continueAnimation) {
+      requestAnimationFrame(() => {
+        this._animateScroll(destination, direction);
+      });
+    }
+  }
+}

data/node_modules/choices.js/src/scripts/components/wrapped-element.ts

@@ -0,0 +1,89 @@
+import { ClassNames } from '../interfaces/class-names';
+import { EventTypes } from '../interfaces/event-type';
+import { addClassesToElement, dispatchEvent, removeClassesFromElement } from '../lib/utils';
+import { EventMap } from '../interfaces';
+
+export default class WrappedElement<T extends HTMLInputElement | HTMLSelectElement> {
+  element: T;
+
+  classNames: ClassNames;
+
+  isDisabled: boolean;
+
+  constructor({ element, classNames }) {
+    this.element = element;
+    this.classNames = classNames;
+    this.isDisabled = false;
+  }
+
+  get isActive(): boolean {
+    return this.element.dataset.choice === 'active';
+  }
+
+  get dir(): string {
+    return this.element.dir;
+  }
+
+  get value(): string {
+    return this.element.value;
+  }
+
+  set value(value: string) {
+    this.element.setAttribute('value', value);
+    this.element.value = value;
+  }
+
+  conceal(): void {
+    const el = this.element;
+    // Hide passed input
+    addClassesToElement(el, this.classNames.input);
+    el.hidden = true;
+
+    // Remove element from tab index
+    el.tabIndex = -1;
+
+    // Backup original styles if any
+    const origStyle = el.getAttribute('style');
+
+    if (origStyle) {
+      el.setAttribute('data-choice-orig-style', origStyle);
+    }
+
+    el.setAttribute('data-choice', 'active');
+  }
+
+  reveal(): void {
+    const el = this.element;
+    // Reinstate passed element
+    removeClassesFromElement(el, this.classNames.input);
+    el.hidden = false;
+    el.removeAttribute('tabindex');
+
+    // Recover original styles if any
+    const origStyle = el.getAttribute('data-choice-orig-style');
+
+    if (origStyle) {
+      el.removeAttribute('data-choice-orig-style');
+      el.setAttribute('style', origStyle);
+    } else {
+      el.removeAttribute('style');
+    }
+    el.removeAttribute('data-choice');
+  }
+
+  enable(): void {
+    this.element.removeAttribute('disabled');
+    this.element.disabled = false;
+    this.isDisabled = false;
+  }
+
+  disable(): void {
+    this.element.setAttribute('disabled', '');
+    this.element.disabled = true;
+    this.isDisabled = true;
+  }
+
+  triggerEvent<K extends EventTypes>(eventType: EventTypes, data?: EventMap[K]['detail']): void {
+    dispatchEvent(this.element, eventType, data || {});
+  }
+}

data/node_modules/choices.js/src/scripts/components/wrapped-input.ts

@@ -0,0 +1,3 @@
+import WrappedElement from './wrapped-element';
+
+export default class WrappedInput extends WrappedElement<HTMLInputElement> {}

data/node_modules/choices.js/src/scripts/components/wrapped-select.ts

@@ -0,0 +1,115 @@
+import { parseCustomProperties } from '../lib/utils';
+import { ClassNames } from '../interfaces/class-names';
+import WrappedElement from './wrapped-element';
+import { GroupFull } from '../interfaces/group-full';
+import { ChoiceFull } from '../interfaces/choice-full';
+import { stringToHtmlClass } from '../lib/choice-input';
+import { isHtmlOptgroup, isHtmlOption } from '../lib/html-guard-statements';
+
+export default class WrappedSelect extends WrappedElement<HTMLSelectElement> {
+  classNames: ClassNames;
+
+  template: (data: object) => HTMLOptionElement;
+
+  extractPlaceholder: boolean;
+
+  constructor({
+    element,
+    classNames,
+    template,
+    extractPlaceholder,
+  }: {
+    element: HTMLSelectElement;
+    classNames: ClassNames;
+    template: (data: object) => HTMLOptionElement;
+    extractPlaceholder: boolean;
+  }) {
+    super({ element, classNames });
+    this.template = template;
+    this.extractPlaceholder = extractPlaceholder;
+  }
+
+  get placeholderOption(): HTMLOptionElement | null {
+    return (
+      this.element.querySelector('option[value=""]') ||
+      // Backward compatibility layer for the non-standard placeholder attribute supported in older versions.
+      this.element.querySelector('option[placeholder]')
+    );
+  }
+
+  addOptions(choices: ChoiceFull[]): void {
+    const fragment = document.createDocumentFragment();
+    choices.forEach((obj) => {
+      const choice = obj;
+      if (choice.element) {
+        return;
+      }
+
+      const option = this.template(choice);
+      fragment.appendChild(option);
+      choice.element = option;
+    });
+    this.element.appendChild(fragment);
+  }
+
+  optionsAsChoices(): (ChoiceFull | GroupFull)[] {
+    const choices: (ChoiceFull | GroupFull)[] = [];
+
+    this.element.querySelectorAll<HTMLElement>(':scope > option, :scope > optgroup').forEach((e) => {
+      if (isHtmlOption(e)) {
+        choices.push(this._optionToChoice(e));
+      } else if (isHtmlOptgroup(e)) {
+        choices.push(this._optgroupToChoice(e));
+      }
+      // todo: hr as empty optgroup, requires displaying empty opt-groups to be useful
+    });
+
+    return choices;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  _optionToChoice(option: HTMLOptionElement): ChoiceFull {
+    // option.value returns the label if there is no value attribute, which can break legacy placeholder attribute support
+    if (!option.hasAttribute('value') && option.hasAttribute('placeholder')) {
+      option.setAttribute('value', '');
+      option.value = '';
+    }
+
+    return {
+      id: 0,
+      group: null,
+      score: 0,
+      rank: 0,
+      value: option.value,
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+      // This attribute is text for the label indicating the meaning of the option. If the `label` attribute isn't defined, its value is that of the element text content (ie `innerText`).
+      label: option.label,
+      element: option,
+      active: true,
+      // this returns true if nothing is selected on initial load, which will break placeholder support
+      selected: this.extractPlaceholder ? option.selected : option.hasAttribute('selected'),
+      disabled: option.disabled,
+      highlighted: false,
+      placeholder: this.extractPlaceholder && (!option.value || option.hasAttribute('placeholder')),
+      labelClass:
+        typeof option.dataset.labelClass !== 'undefined' ? stringToHtmlClass(option.dataset.labelClass) : undefined,
+      labelDescription:
+        typeof option.dataset.labelDescription !== 'undefined' ? option.dataset.labelDescription : undefined,
+      customProperties: parseCustomProperties(option.dataset.customProperties),
+    };
+  }
+
+  _optgroupToChoice(optgroup: HTMLOptGroupElement): GroupFull {
+    const options = optgroup.querySelectorAll('option');
+    const choices = Array.from(options).map((option) => this._optionToChoice(option));
+
+    return {
+      id: 0,
+      label: optgroup.label || '',
+      element: optgroup,
+      active: !!choices.length,
+      disabled: optgroup.disabled,
+      choices,
+    };
+  }
+}

data/node_modules/choices.js/src/scripts/constants.ts

@@ -0,0 +1 @@
+export const SCROLLING_SPEED: number = 4 as const;