govuk_publishing_components 58.1.1 → 58.2.0

data/node_modules/choices.js/src/scripts/interfaces/passed-element.ts

@@ -0,0 +1,96 @@
+import { InputChoice } from './input-choice';
+import { EventChoice } from './event-choice';
+
+/**
+ * Events fired by Choices behave the same as standard events. Each event is triggered on the element passed to Choices (accessible via `this.passedElement`. Arguments are accessible within the `event.detail` object.
+ */
+export interface EventMap {
+  /**
+   * Triggered each time an item is added (programmatically or by the user).
+   *
+   * **Input types affected:** text, select-one, select-multiple
+   *
+   * Arguments: id, value, label, groupValue
+   */
+  addItem: CustomEvent<EventChoice>;
+
+  /**
+   * Triggered each time an item is removed (programmatically or by the user).
+   *
+   * **Input types affected:** text, select-one, select-multiple
+   *
+   * Arguments: id, value, label, groupValue
+   */
+  removeItem: CustomEvent<EventChoice | undefined>;
+
+  /**
+   * Triggered each time an item is highlighted.
+   *
+   * **Input types affected:** text, select-multiple
+   *
+   * Arguments: id, value, label, groupValue
+   */
+  highlightItem: CustomEvent<EventChoice | undefined>;
+
+  /**
+   * Triggered each time an item is unhighlighted.
+   *
+   * **Input types affected:** text, select-multiple
+   *
+   * Arguments: id, value, label, groupValue
+   */
+  unhighlightItem: CustomEvent<EventChoice | undefined>;
+
+  /**
+   * Triggered each time a choice is selected **by a user**, regardless if it changes the value of the input.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * Arguments: choice: Choice
+   */
+  choice: CustomEvent<{ choice: InputChoice }>;
+
+  /**
+   * Triggered each time an item is added/removed **by a user**.
+   *
+   * **Input types affected:** text, select-one, select-multiple
+   *
+   * Arguments: value
+   */
+  change: CustomEvent<{ value: string }>;
+
+  /**
+   * Triggered when a user types into an input to search choices. When a search is ended, a search event with an empty value with no resultCount is triggered.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * Arguments: value, resultCount
+   */
+  search: CustomEvent<{ value: string; resultCount: number }>;
+
+  /**
+   * Triggered when the dropdown is shown.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * Arguments: -
+   */
+  showDropdown: CustomEvent<undefined>;
+
+  /**
+   * Triggered when the dropdown is hidden.
+   *
+   * **Input types affected:** select-one, select-multiple
+   *
+   * Arguments: -
+   */
+  hideDropdown: CustomEvent<undefined>;
+
+  /**
+   * Triggered when a choice from the dropdown is highlighted.
+   *
+   * Input types affected: select-one, select-multiple
+   * Arguments: el is the choice.passedElement that was affected.
+   */
+  highlightChoice: CustomEvent<{ el: HTMLElement }>;
+}

data/node_modules/choices.js/src/scripts/interfaces/position-options-type.ts

@@ -0,0 +1 @@
+export type PositionOptionsType = 'auto' | 'top' | 'bottom';

data/node_modules/choices.js/src/scripts/interfaces/search.ts

@@ -0,0 +1,12 @@
+export interface SearchResult<T extends object> {
+  item: T;
+  score: number;
+  rank: number; // values of 0 means this item is not in the search-result set, and should be discarded
+}
+
+export interface Searcher<T extends object> {
+  reset(): void;
+  isEmptyIndex(): boolean;
+  index(data: T[]): void;
+  search(needle: string): SearchResult<T>[];
+}

data/node_modules/choices.js/src/scripts/interfaces/state.ts

@@ -0,0 +1,12 @@
+import { ChoiceFull } from './choice-full';
+import { GroupFull } from './group-full';
+
+export interface State {
+  choices: ChoiceFull[];
+  groups: GroupFull[];
+  items: ChoiceFull[];
+}
+
+export type StateChangeSet = {
+  [K in keyof State]: boolean;
+};

data/node_modules/choices.js/src/scripts/interfaces/store.ts

@@ -0,0 +1,84 @@
+import { StateChangeSet, State } from './state';
+import { ChoiceFull } from './choice-full';
+import { GroupFull } from './group-full';
+import { ActionTypes } from './action-type';
+
+export interface AnyAction<A extends ActionTypes = ActionTypes> {
+  type: A;
+}
+
+export interface StateUpdate<T> {
+  update: boolean;
+  state: T;
+}
+
+export type Reducer<T> = (state: T, action: AnyAction, context?: unknown) => StateUpdate<T>;
+
+export type StoreListener = (changes: StateChangeSet) => void;
+
+export interface Store {
+  dispatch(action: AnyAction): void;
+
+  subscribe(onChange: StoreListener): void;
+
+  withTxn(func: () => void): void;
+
+  reset(): void;
+
+  get defaultState(): State;
+
+  /**
+   * Get store object
+   */
+  get state(): State;
+
+  /**
+   * Get items from store
+   */
+  get items(): ChoiceFull[];
+
+  /**
+   * Get highlighted items from store
+   */
+  get highlightedActiveItems(): ChoiceFull[];
+
+  /**
+   * Get choices from store
+   */
+  get choices(): ChoiceFull[];
+
+  /**
+   * Get active choices from store
+   */
+  get activeChoices(): ChoiceFull[];
+
+  /**
+   * Get choices that can be searched (excluding placeholders)
+   */
+  get searchableChoices(): ChoiceFull[];
+
+  /**
+   * Get groups from store
+   */
+  get groups(): GroupFull[];
+
+  /**
+   * Get active groups from store
+   */
+  get activeGroups(): GroupFull[];
+
+  /**
+   * Get loading state from store
+   */
+  inTxn(): boolean;
+
+  /**
+   * Get single choice by it's ID
+   */
+  getChoiceById(id: number): ChoiceFull | undefined;
+
+  /**
+   * Get group by group id
+   */
+  getGroupById(id: number): GroupFull | undefined;
+}

data/node_modules/choices.js/src/scripts/interfaces/string-pre-escaped.ts

@@ -0,0 +1,3 @@
+export interface StringPreEscaped {
+  readonly trusted: string;
+}

data/node_modules/choices.js/src/scripts/interfaces/string-untrusted.ts

@@ -0,0 +1,5 @@
+export interface StringUntrusted {
+  readonly escaped: string;
+
+  readonly raw: string;
+}

data/node_modules/choices.js/src/scripts/interfaces/templates.ts

@@ -0,0 +1,66 @@
+import { PassedElementType } from './passed-element-type';
+import { StringPreEscaped } from './string-pre-escaped';
+import { ChoiceFull } from './choice-full';
+import { GroupFull } from './group-full';
+// eslint-disable-next-line import/no-cycle
+import { Options } from './options';
+import { Types } from './types';
+
+export type TemplateOptions = Pick<
+  Options,
+  | 'classNames'
+  | 'allowHTML'
+  | 'removeItemButtonAlignLeft'
+  | 'removeItemIconText'
+  | 'removeItemLabelText'
+  | 'searchEnabled'
+  | 'labelId'
+>;
+
+export const NoticeTypes = {
+  noChoices: 'no-choices',
+  noResults: 'no-results',
+  addChoice: 'add-choice',
+  generic: '',
+} as const;
+export type NoticeType = Types.ValueOf<typeof NoticeTypes>;
+
+export type CallbackOnCreateTemplatesFn = (
+  template: Types.StrToEl,
+  escapeForTemplate: Types.EscapeForTemplateFn,
+  getClassNames: Types.GetClassNamesFn,
+) => Partial<Templates>;
+
+export interface Templates {
+  containerOuter(
+    options: TemplateOptions,
+    dir: HTMLElement['dir'],
+    isSelectElement: boolean,
+    isSelectOneElement: boolean,
+    searchEnabled: boolean,
+    passedElementType: PassedElementType,
+    labelId: string,
+  ): HTMLDivElement;
+
+  containerInner({ classNames: { containerInner } }: TemplateOptions): HTMLDivElement;
+
+  itemList(options: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
+
+  placeholder(options: TemplateOptions, value: StringPreEscaped | string): HTMLDivElement;
+
+  item(options: TemplateOptions, choice: ChoiceFull, removeItemButton: boolean): HTMLDivElement;
+
+  choiceList(options: TemplateOptions, isSelectOneElement: boolean): HTMLDivElement;
+
+  choiceGroup(options: TemplateOptions, group: GroupFull): HTMLDivElement;
+
+  choice(options: TemplateOptions, choice: ChoiceFull, selectText: string, groupText?: string): HTMLDivElement;
+
+  input(options: TemplateOptions, placeholderValue: string | null): HTMLInputElement;
+
+  dropdown(options: TemplateOptions): HTMLDivElement;
+
+  notice(options: TemplateOptions, innerText: string, type: NoticeType): HTMLDivElement;
+
+  option(choice: ChoiceFull): HTMLOptionElement;
+}

data/node_modules/choices.js/src/scripts/interfaces/types.ts

@@ -0,0 +1,21 @@
+import { StringUntrusted } from './string-untrusted';
+import { StringPreEscaped } from './string-pre-escaped';
+
+export namespace Types {
+  export type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
+  export type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
+  export type GetClassNamesFn = (s: string | Array<string>) => string;
+  export type StringFunction = () => string;
+  export type NoticeStringFunction = (value: string, valueRaw: string) => string;
+  export type NoticeLimitFunction = (maxItemCount: number) => string;
+  export type FilterFunction = (value: string) => boolean;
+  export type ValueCompareFunction = (value1: string, value2: string) => boolean;
+
+  export interface RecordToCompare {
+    value?: StringUntrusted | string;
+    label?: StringUntrusted | string;
+  }
+  export type ValueOf<T extends object> = T[keyof T];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export type CustomProperties = Record<string, any> | string;
+}

data/node_modules/choices.js/src/scripts/lib/choice-input.ts

@@ -0,0 +1,88 @@
+import { InputChoice } from '../interfaces/input-choice';
+import { InputGroup } from '../interfaces/input-group';
+import { GroupFull } from '../interfaces/group-full';
+import { ChoiceFull } from '../interfaces/choice-full';
+import { sanitise, unwrapStringForRaw } from './utils';
+
+type MappedInputTypeToChoiceType<T extends string | InputChoice | InputGroup> = T extends InputGroup
+  ? GroupFull
+  : ChoiceFull;
+
+export const coerceBool = (arg: unknown, defaultValue: boolean = true): boolean =>
+  typeof arg === 'undefined' ? defaultValue : !!arg;
+
+export const stringToHtmlClass = (input: string | string[] | undefined): string[] | undefined => {
+  if (typeof input === 'string') {
+    // eslint-disable-next-line no-param-reassign
+    input = input.split(' ').filter((s) => s.length);
+  }
+
+  if (Array.isArray(input) && input.length) {
+    return input;
+  }
+
+  return undefined;
+};
+
+export const mapInputToChoice = <T extends string | InputChoice | InputGroup>(
+  value: T,
+  allowGroup: boolean,
+  allowRawString: boolean = true,
+): MappedInputTypeToChoiceType<T> => {
+  if (typeof value === 'string') {
+    const sanitisedValue = sanitise(value);
+    const userValue = allowRawString || sanitisedValue === value ? value : { escaped: sanitisedValue, raw: value };
+
+    const result: ChoiceFull = mapInputToChoice<InputChoice>(
+      {
+        value,
+        label: userValue,
+        selected: true,
+      },
+      false,
+    );
+
+    return result as MappedInputTypeToChoiceType<T>;
+  }
+
+  const groupOrChoice = value as InputChoice | InputGroup;
+  if ('choices' in groupOrChoice) {
+    if (!allowGroup) {
+      // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
+      throw new TypeError(`optGroup is not allowed`);
+    }
+    const group = groupOrChoice;
+    const choices = group.choices.map((e) => mapInputToChoice<InputChoice>(e, false));
+
+    const result: GroupFull = {
+      id: 0, // actual ID will be assigned during _addGroup
+      label: unwrapStringForRaw(group.label) || group.value,
+      active: !!choices.length,
+      disabled: !!group.disabled,
+      choices,
+    };
+
+    return result as MappedInputTypeToChoiceType<T>;
+  }
+
+  const choice = groupOrChoice;
+
+  const result: ChoiceFull = {
+    id: 0, // actual ID will be assigned during _addChoice
+    group: null, // actual group will be assigned during _addGroup but before _addChoice
+    score: 0, // used in search
+    rank: 0, // used in search, stable sort order
+    value: choice.value,
+    label: choice.label || choice.value,
+    active: coerceBool(choice.active),
+    selected: coerceBool(choice.selected, false),
+    disabled: coerceBool(choice.disabled, false),
+    placeholder: coerceBool(choice.placeholder, false),
+    highlighted: false,
+    labelClass: stringToHtmlClass(choice.labelClass),
+    labelDescription: choice.labelDescription,
+    customProperties: choice.customProperties,
+  };
+
+  return result as MappedInputTypeToChoiceType<T>;
+};

data/node_modules/choices.js/src/scripts/lib/html-guard-statements.ts

@@ -0,0 +1,7 @@
+export const isHtmlInputElement = (e: Element): e is HTMLInputElement => e.tagName === 'INPUT';
+
+export const isHtmlSelectElement = (e: Element): e is HTMLSelectElement => e.tagName === 'SELECT';
+
+export const isHtmlOption = (e: Element): e is HTMLOptionElement => e.tagName === 'OPTION';
+
+export const isHtmlOptgroup = (e: Element): e is HTMLOptGroupElement => e.tagName === 'OPTGROUP';

data/node_modules/choices.js/src/scripts/lib/utils.ts

@@ -0,0 +1,230 @@
+import { EventTypes } from '../interfaces/event-type';
+import { StringUntrusted } from '../interfaces/string-untrusted';
+import { StringPreEscaped } from '../interfaces/string-pre-escaped';
+import { ChoiceFull } from '../interfaces/choice-full';
+import { Types } from '../interfaces/types';
+import { canUseDom } from '../interfaces/build-flags';
+
+const getRandomNumber = (min: number, max: number): number => Math.floor(Math.random() * (max - min) + min);
+
+const generateChars = (length: number): string =>
+  Array.from({ length }, () => getRandomNumber(0, 36).toString(36)).join('');
+
+export const generateId = (element: HTMLInputElement | HTMLSelectElement, prefix: string): string => {
+  let id = element.id || (element.name && `${element.name}-${generateChars(2)}`) || generateChars(4);
+  id = id.replace(/(:|\.|\[|\]|,)/g, '');
+  id = `${prefix}-${id}`;
+
+  return id;
+};
+
+export const getAdjacentEl = (startEl: HTMLElement, selector: string, direction = 1): HTMLElement | null => {
+  const prop = `${direction > 0 ? 'next' : 'previous'}ElementSibling`;
+
+  let sibling = startEl[prop];
+  while (sibling) {
+    if (sibling.matches(selector)) {
+      return sibling;
+    }
+    sibling = sibling[prop];
+  }
+
+  return null;
+};
+
+export const isScrolledIntoView = (element: HTMLElement, parent: HTMLElement, direction = 1): boolean => {
+  let isVisible: boolean;
+
+  if (direction > 0) {
+    // In view from bottom
+    isVisible = parent.scrollTop + parent.offsetHeight >= element.offsetTop + element.offsetHeight;
+  } else {
+    // In view from top
+    isVisible = element.offsetTop >= parent.scrollTop;
+  }
+
+  return isVisible;
+};
+
+export const sanitise = <T>(value: T | StringUntrusted | StringPreEscaped | string): T | string => {
+  if (typeof value !== 'string') {
+    if (value === null || value === undefined) {
+      return '';
+    }
+
+    if (typeof value === 'object') {
+      if ('raw' in value) {
+        return sanitise(value.raw);
+      }
+      if ('trusted' in value) {
+        return value.trusted;
+      }
+    }
+
+    return value;
+  }
+
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/>/g, '&gt;')
+    .replace(/</g, '&lt;')
+    .replace(/'/g, '&#039;')
+    .replace(/"/g, '&quot;');
+};
+
+export const strToEl = ((): ((str: string) => Element) => {
+  if (!canUseDom) {
+    // @ts-expect-error Do not run strToEl in non-browser environment
+    return (): void => {};
+  }
+  const tmpEl = document.createElement('div');
+
+  return (str): Element => {
+    tmpEl.innerHTML = str.trim();
+    const firstChild = tmpEl.children[0];
+
+    while (tmpEl.firstChild) {
+      tmpEl.removeChild(tmpEl.firstChild);
+    }
+
+    return firstChild;
+  };
+})();
+
+export const resolveNoticeFunction = (fn: Types.NoticeStringFunction | string, value: string): string => {
+  return typeof fn === 'function' ? fn(sanitise(value), value) : fn;
+};
+
+export const resolveStringFunction = (fn: Types.StringFunction | string): string => {
+  return typeof fn === 'function' ? fn() : fn;
+};
+
+export const unwrapStringForRaw = (s?: StringUntrusted | StringPreEscaped | string): string => {
+  if (typeof s === 'string') {
+    return s;
+  }
+
+  if (typeof s === 'object') {
+    if ('trusted' in s) {
+      return s.trusted;
+    }
+    if ('raw' in s) {
+      return s.raw;
+    }
+  }
+
+  return '';
+};
+
+export const unwrapStringForEscaped = (s?: StringUntrusted | StringPreEscaped | string): string => {
+  if (typeof s === 'string') {
+    return s;
+  }
+
+  if (typeof s === 'object') {
+    if ('escaped' in s) {
+      return s.escaped;
+    }
+    if ('trusted' in s) {
+      return s.trusted;
+    }
+  }
+
+  return '';
+};
+
+export const escapeForTemplate = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string): string =>
+  allowHTML ? unwrapStringForEscaped(s) : (sanitise(s) as string);
+
+export const setElementHtml = (
+  el: HTMLElement,
+  allowHtml: boolean,
+  html: StringUntrusted | StringPreEscaped | string,
+): void => {
+  el.innerHTML = escapeForTemplate(allowHtml, html);
+};
+
+export const sortByAlpha = (
+  { value, label = value }: Types.RecordToCompare,
+  { value: value2, label: label2 = value2 }: Types.RecordToCompare,
+): number =>
+  unwrapStringForRaw(label).localeCompare(unwrapStringForRaw(label2), [], {
+    sensitivity: 'base',
+    ignorePunctuation: true,
+    numeric: true,
+  });
+
+export const sortByScore = (a: Pick<ChoiceFull, 'score'>, b: Pick<ChoiceFull, 'score'>): number => {
+  return a.score - b.score;
+};
+
+export const sortByRank = (a: Pick<ChoiceFull, 'rank'>, b: Pick<ChoiceFull, 'rank'>): number => {
+  return a.rank - b.rank;
+};
+
+export const dispatchEvent = (element: HTMLElement, type: EventTypes, customArgs: object | null = null): boolean => {
+  const event = new CustomEvent(type, {
+    detail: customArgs,
+    bubbles: true,
+    cancelable: true,
+  });
+
+  return element.dispatchEvent(event);
+};
+
+export const cloneObject = <T>(obj: T): T => (obj !== undefined ? JSON.parse(JSON.stringify(obj)) : undefined);
+
+/**
+ * Returns an array of keys present on the first but missing on the second object
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const diff = (a: Record<string, any>, b: Record<string, any>): string[] => {
+  const aKeys = Object.keys(a).sort();
+  const bKeys = Object.keys(b).sort();
+
+  return aKeys.filter((i) => bKeys.indexOf(i) < 0);
+};
+
+export const getClassNames = (ClassNames: Array<string> | string): Array<string> => {
+  return Array.isArray(ClassNames) ? ClassNames : [ClassNames];
+};
+
+export const getClassNamesSelector = (option: string | Array<string> | null): string => {
+  if (option && Array.isArray(option)) {
+    return option
+      .map((item) => {
+        return `.${item}`;
+      })
+      .join('');
+  }
+
+  return `.${option}`;
+};
+
+export const addClassesToElement = (element: HTMLElement, className: Array<string> | string): void => {
+  element.classList.add(...getClassNames(className));
+};
+
+export const removeClassesFromElement = (element: HTMLElement, className: Array<string> | string): void => {
+  element.classList.remove(...getClassNames(className));
+};
+
+export const parseCustomProperties = (customProperties?: string): object | string => {
+  if (typeof customProperties !== 'undefined') {
+    try {
+      return JSON.parse(customProperties);
+    } catch (e) {
+      return customProperties;
+    }
+  }
+
+  return {};
+};
+
+export const updateClassList = (item: ChoiceFull, add: string | string[], remove: string | string[]): void => {
+  const { itemEl } = item;
+  if (itemEl) {
+    removeClassesFromElement(itemEl, remove);
+    addClassesToElement(itemEl, add);
+  }
+};