@hortonstudio/main 1.2.4 → 1.2.6

package/attributes-master/packages/combobox/src/actions/input/index.ts

@@ -0,0 +1,235 @@
+import {
+  ARIA_EXPANDED_KEY,
+  ARROW_DOWN_KEY,
+  ARROW_LEFT_KEY,
+  ARROW_RIGHT_KEY,
+  ARROW_UP_KEY,
+  BACKSPACE_KEY,
+  CLICK,
+  ENTER_KEY,
+  ESCAPE_KEY,
+  SPACE_KEY,
+  TAB_KEY,
+} from '@finsweet/attributes-utils';
+
+import { focusOnInput, setActiveDescendant, toggleDropdown, toggleDropdownCloseIcon } from '../../utils';
+import { FS_DROPDOWN_TOGGLE_KEY } from '../../utils/constants';
+import type { Settings } from '../../utils/types';
+import { populateOptions } from '../populate';
+
+/**
+ * Handles `keyup` events on the `inputElement` and updates the dropdown.
+ * @param e The `keyup` event.
+ * @param settings The instance {@link Settings}.
+ */
+export const handleInputKeyUpEvents = (e: KeyboardEvent, settings: Settings) => {
+  e.stopPropagation();
+  e.stopImmediatePropagation();
+
+  const { dropdownToggle, inputElement } = settings;
+
+  const { key } = e;
+  const referenceInput = e.target as HTMLInputElement;
+
+  const inputValue = referenceInput.value.toLowerCase().trim() ?? '';
+  populateOptions(settings, inputValue, !inputValue, true);
+
+  const dropdownIsOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
+
+  if (key === ARROW_DOWN_KEY) {
+    if (!dropdownIsOpen) toggleDropdown(settings);
+
+    if (inputValue.length > 0) {
+      const selected = settings.optionsStore.find(({ selected }) => selected);
+      const inputIsEqualToSelectedOption = selected?.value.toLocaleLowerCase() === inputValue.toLowerCase();
+
+      if (selected && inputIsEqualToSelectedOption) {
+        populateOptions(settings, inputValue, true, true);
+      } else {
+        populateOptions(settings, inputValue, false, true);
+      }
+    } else {
+      populateOptions(settings, '', true, true);
+    }
+
+    inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, ARROW_DOWN_KEY);
+
+    focusOnDropdownItem(settings);
+    return;
+  }
+};
+/**
+ * Handles `keydown` events on the `inputElement` and updates the dropdown.
+ * @param e The `keydown` event.
+ * @param settings The instance {@link Settings}.
+ */
+export const handleInputKeyDownEvents = (e: KeyboardEvent, settings: Settings) => {
+  e.stopPropagation();
+
+  const { key } = e;
+
+  const { dropdownToggle, inputElement } = settings;
+
+  inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, CLICK);
+
+  const referenceInput = e.target as HTMLInputElement;
+
+  const inputValue = referenceInput.value.toLowerCase().trim() ?? '';
+
+  const dropdownIsOpen = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
+
+  if (key === ESCAPE_KEY) {
+    handleClearInput(e, settings);
+
+    if (dropdownIsOpen) {
+      toggleDropdown(settings);
+    }
+    return;
+  }
+
+  if (
+    key === ENTER_KEY ||
+    key === ARROW_DOWN_KEY ||
+    key === TAB_KEY ||
+    key === SPACE_KEY ||
+    key === ARROW_RIGHT_KEY ||
+    key === ARROW_LEFT_KEY
+  )
+    return;
+
+  if (key === ARROW_UP_KEY && dropdownIsOpen) {
+    toggleDropdown(settings);
+    return;
+  }
+
+  if (key === BACKSPACE_KEY && inputValue.length === 0) {
+    populateOptions(settings, '', true, true);
+    return;
+  }
+
+  if (key === BACKSPACE_KEY && inputValue.length > 0) {
+    populateOptions(settings, inputValue, !inputValue, true);
+    if (!dropdownIsOpen) toggleDropdown(settings);
+    return;
+  }
+
+  if (!dropdownIsOpen && inputValue && key !== ARROW_UP_KEY) {
+    toggleDropdown(settings);
+  }
+
+  toggleDropdownCloseIcon(settings);
+  populateOptions(settings, inputValue, !inputValue, true);
+};
+
+/**
+ * Shows the dropdown if hidden.
+ * @param settings The instance {@link Settings}.
+ */
+export const handleInputClickEvents = (e: MouseEvent, settings: Settings) => {
+  e.stopPropagation();
+  e.preventDefault();
+
+  const { dropdownToggle, inputElement } = settings;
+
+  inputElement.setAttribute(FS_DROPDOWN_TOGGLE_KEY, CLICK);
+
+  const toggled = dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
+  inputElement.setAttribute(ARIA_EXPANDED_KEY, `${!toggled}`);
+
+  if (toggled) {
+    return;
+  }
+
+  populateOptions(settings, '', true, true);
+  toggleDropdown(settings);
+};
+
+/**
+ * Listens to the `input` escape key or focusout events.
+ * @param e The Event object.
+ * @param settings The instance {@link Settings}.
+ * @param fromInput Whether the event was triggered from the input element.
+ */
+export const handleClearInput = (e: KeyboardEvent | FocusEvent, settings: Settings, fromInput = false) => {
+  const { inputElement, selectElement, preventClear } = settings;
+
+  if (!fromInput) {
+    focusOnInput(settings);
+  }
+
+  toggleDropdownCloseIcon(settings);
+
+  const selected = settings.optionsStore.find(({ selected }) => selected);
+
+  if (selected) return;
+
+  if (fromInput) {
+    const relatedTarget = (e as FocusEvent).relatedTarget as HTMLElement;
+    if (relatedTarget || preventClear) return;
+
+    inputElement.value = '';
+    selectElement.value = '';
+    return;
+  }
+
+  if (!selected) {
+    if (preventClear) return;
+
+    inputElement.value = '';
+    selectElement.value = '';
+  }
+
+  const dropdownIsOpen = settings.dropdownToggle.getAttribute(ARIA_EXPANDED_KEY) === 'true';
+
+  if (dropdownIsOpen) {
+    toggleDropdown(settings);
+  }
+};
+
+/**
+ * Listens to `updateComboboxInputField` custom event and updates input value and select value
+ * @param settings The instance {@link Settings}.
+ */
+export const updateInputField = (e: Event, settings: Settings) => {
+  const { optionsStore, inputElement } = settings;
+  const input = e.target as HTMLInputElement;
+
+  const selectedOption = optionsStore.find(({ selected }) => selected);
+  const selectedText = selectedOption?.text ?? '';
+  const selectedValue = selectedOption?.value ?? '';
+  const inputValue = input.value;
+
+  if (selectedOption && selectedValue !== inputValue) {
+    inputElement.value = selectedText;
+
+    toggleDropdownCloseIcon(settings);
+    return;
+  }
+};
+
+/**
+ * Focuses on the dropdown list item based on the current selection.
+ * @param settings The instance {@link Settings}.
+ * @returns void
+ */
+const focusOnDropdownItem = (settings: Settings) => {
+  const { optionsStore, inputElement } = settings;
+  const selectedOption = optionsStore.find(({ selected }) => selected);
+
+  if (!selectedOption && optionsStore.length > 0) {
+    const [firstOption] = optionsStore.filter(({ hidden }) => !hidden);
+
+    firstOption.element.focus();
+    setActiveDescendant(inputElement, firstOption.element);
+
+    return;
+  }
+
+  if (selectedOption) {
+    selectedOption.element.focus();
+    setActiveDescendant(inputElement, selectedOption.element);
+
+    return;
+  }
+  return;
+};

package/attributes-master/packages/combobox/src/actions/observe.ts

@@ -0,0 +1,158 @@
+import {
+  ARIA_ACTIVEDESCENDANT_KEY,
+  ARIA_EXPANDED_KEY,
+  ARROW_DOWN_KEY,
+  CLICK,
+  ID_KEY,
+  isHTMLOptionElement,
+} from '@finsweet/attributes-utils';
+import debounce from 'just-debounce';
+
+import { focusOnInput, updateComboboxInputField } from '../utils';
+import { DROPDOWN_IS_OPEN, FS_DROPDOWN_TOGGLE_KEY } from '../utils/constants';
+import type { Settings } from '../utils/types';
+import { populateOptions } from './populate';
+
+/**
+ * Observes when the dropdown list is opened/closed.
+ * @param settings The instance {@link Settings}.
+ *
+ * @returns The MutationObserver.
+ */
+const observeDropdownList = (settings: Settings) => {
+  const { dropdownList, navListElement, optionsStore, selectElement, inputElement } = settings;
+  let prevDropdownState = navListElement.classList.contains(DROPDOWN_IS_OPEN);
+  let currentStateIsOpen = false;
+
+  const callback: MutationCallback = debounce((mutations: MutationRecord[]) => {
+    mutations.forEach((mutation) => {
+      if (mutation.attributeName === 'class') {
+        const selectValue = selectElement.value;
+        const inputValue = inputElement.value;
+        const dropdownToggleKey = inputElement.getAttribute(FS_DROPDOWN_TOGGLE_KEY);
+        const firstOption = Array.from(optionsStore).find((el) => !el.hidden);
+
+        const selectedOption = Array.from(optionsStore).find(
+          (el) => el?.value.toLowerCase().trim() === selectValue?.toLowerCase().trim()
+        );
+
+        currentStateIsOpen = (mutation.target as HTMLDivElement).classList.contains(DROPDOWN_IS_OPEN);
+        if (prevDropdownState !== currentStateIsOpen) {
+          prevDropdownState = currentStateIsOpen;
+        }
+
+        if (!selectedOption && currentStateIsOpen) {
+          navListElement.scrollTop = 0;
+        }
+
+        if (currentStateIsOpen) {
+          const toFocus = selectedOption || firstOption;
+
+          if (toFocus) toFocus.element.focus();
+        }
+
+        inputElement.setAttribute(ARIA_EXPANDED_KEY, `${currentStateIsOpen}`);
+
+        if (selectedOption) {
+          const id = selectedOption.element.getAttribute(ID_KEY);
+          inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, `${id}`);
+
+          if (currentStateIsOpen && dropdownToggleKey === ARROW_DOWN_KEY) {
+            selectedOption.element.focus();
+            return;
+          }
+          if (currentStateIsOpen && dropdownToggleKey === CLICK) {
+            selectedOption.element.focus();
+            focusOnInput(settings);
+            return;
+          }
+
+          if (!currentStateIsOpen) {
+            updateComboboxInputField(settings);
+            focusOnInput(settings);
+          }
+
+          return;
+        }
+
+        if (!selectedOption && inputValue && currentStateIsOpen && firstOption) {
+          if (dropdownToggleKey === ARROW_DOWN_KEY) firstOption.element.focus();
+          if (dropdownToggleKey === CLICK) focusOnInput(settings);
+
+          return;
+        }
+
+        if (currentStateIsOpen && !selectedOption) {
+          inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, '');
+
+          if (dropdownToggleKey === ARROW_DOWN_KEY && firstOption) {
+            firstOption.element.focus();
+            return;
+          }
+
+          focusOnInput(settings);
+        }
+        if (!currentStateIsOpen) {
+          updateComboboxInputField(settings);
+          focusOnInput(settings);
+
+          if (!selectedOption) inputElement.setAttribute(ARIA_ACTIVEDESCENDANT_KEY, '');
+        }
+      }
+    });
+
+    const selectedOption = optionsStore.find(({ selected }) => selected);
+    const firstNonHiddenOption = optionsStore.find(({ hidden }) => !hidden);
+
+    if (!selectedOption || !firstNonHiddenOption) return;
+  }, 20);
+
+  const observer = new MutationObserver(callback);
+
+  observer.observe(dropdownList, {
+    attributes: true,
+    attributeFilter: ['class', 'style'],
+  });
+
+  return observer;
+};
+
+/**
+ * Observes changes in the {@link HTMLSelectElement} options.
+ * @param settings The instance {@link Settings}.
+ *
+ * @returns The MutationObserver.
+ */
+const observeSelectElement = (settings: Settings) => {
+  const { selectElement } = settings;
+
+  const observer = new MutationObserver((mutations) => {
+    const hasMutatedOptions = mutations.some(({ addedNodes, removedNodes }) =>
+      [...addedNodes, ...removedNodes].some(isHTMLOptionElement)
+    );
+
+    if (hasMutatedOptions) populateOptions(settings);
+  });
+
+  observer.observe(selectElement, {
+    childList: true,
+  });
+
+  return observer;
+};
+
+/**
+ * Observes mutations on elements of the instance.
+ * @param settings The instance {@link Settings}.
+ *
+ * @returns A callback to destroy the MutationObservers.
+ */
+export const observeElements = (settings: Settings) => {
+  const dropdownListObserver = observeDropdownList(settings);
+  const selectElementObserver = observeSelectElement(settings);
+
+  return () => {
+    dropdownListObserver.disconnect();
+    selectElementObserver.disconnect();
+  };
+};

package/attributes-master/packages/combobox/src/actions/populate.ts

@@ -0,0 +1,97 @@
+import { ARIA_POSINSET_KEY, ARIA_SETSIZE_KEY, cloneNode, findTextNode, ID_KEY } from '@finsweet/attributes-utils';
+
+import type { OptionData, Settings } from '../utils/types';
+import { setOptionAria } from './a11y';
+import { updateOptionsState } from './state';
+
+/**
+ * Populates the custom options based on the `HTMLSelectElement`'s options.
+ * @param settings The instance {@link Settings}.
+ * @param {string} inputValue Value from input field.
+ * @param {boolean} showAll if dropdown should show all or filtered options.
+ * @param {boolean} isTyping user is searching.
+ * @param {boolean} initialLoad if dropdown is loaded for the first time.
+ */
+export const populateOptions = (
+  settings: Settings,
+  inputValue = '',
+  showAll = false,
+  isTyping = false,
+  initialLoad = false
+) => {
+  const {
+    optionsStore,
+    optionTemplate,
+    optionsList,
+    label,
+    noResultsTemplate,
+    selectElement: { options, value: currentValue },
+  } = settings;
+
+  // Clear existing options
+  noResultsTemplate?.remove();
+  for (const { element } of optionsStore.values()) {
+    element.remove();
+  }
+
+  optionsStore.splice(0, optionsStore.length);
+
+  let selectedOption: OptionData | undefined;
+
+  const optionsConfigured = Array.from(options).filter((item) => item.value && item.textContent);
+  const optionsFiltered = optionsConfigured.filter((item) =>
+    item.text.trim().toLowerCase().includes(inputValue.trim().toLowerCase())
+  );
+
+  if (optionsFiltered.length === 0 && noResultsTemplate) {
+    optionsList.appendChild(noResultsTemplate);
+
+    return;
+  }
+
+  const optionsArr = (showAll ? optionsConfigured : optionsFiltered).sort((a, b) => a.value.localeCompare(b.value));
+
+  // Create new options
+  for (const { value, text } of optionsArr) {
+    const element = cloneNode(optionTemplate) as HTMLAnchorElement;
+
+    const textNode = findTextNode(element) || element;
+    textNode.textContent = text;
+
+    const elementId = element.getAttribute(ID_KEY) || '';
+    const id = `fs-option-${value.toLowerCase().trim().replace(/\s/g, '-')}`;
+
+    element.setAttribute(ID_KEY, elementId || id);
+    element.setAttribute(ARIA_SETSIZE_KEY, `${optionsArr.length}`);
+
+    const index = optionsArr.findIndex((item) => item.value === value);
+    element.setAttribute(ARIA_POSINSET_KEY, `${index + 1}`);
+
+    setOptionAria(element);
+
+    optionsList.appendChild(element);
+
+    const selected = value === currentValue;
+
+    const optionData: OptionData = {
+      text,
+      value,
+      element,
+      selected,
+      focused: false,
+    };
+
+    if (selected) selectedOption = optionData;
+
+    optionsStore.push(optionData);
+  }
+  if (isTyping) {
+    updateOptionsState(settings, selectedOption);
+  }
+
+  if (!inputValue && selectedOption && label) {
+    const labelText = label.textContent || '';
+
+    updateOptionsState(settings, { ...selectedOption, value: '', text: labelText }, initialLoad);
+  }
+};

package/attributes-master/packages/combobox/src/actions/selectElement/index.ts

@@ -0,0 +1,23 @@
+import { setFormFieldValue } from '@finsweet/attributes-utils';
+
+import { toggleDropdownCloseIcon } from '../../utils';
+import type { Settings } from '../../utils/types';
+import { updateOptionsState } from '../state';
+
+/**
+ * Adds two way data binding.
+ * Handles `change` events on the hidden `selectElement` and updates the dropdown.
+ * @param settings The instance {@link Settings}.
+ */
+export const handleSelectChangeEvents = (settings: Settings) => {
+  const { selectElement, optionsStore } = settings;
+
+  const selectedOption = optionsStore.find(({ value }) => value === selectElement.value);
+  if (!selectedOption) return;
+
+  setFormFieldValue(settings.inputElement, selectedOption.text);
+  settings.inputElement.dispatchEvent(new Event('change'));
+
+  toggleDropdownCloseIcon(settings);
+  updateOptionsState(settings, selectedOption);
+};

package/attributes-master/packages/combobox/src/actions/settings.ts

@@ -0,0 +1,134 @@
+import {
+  ARIA_AUTOCOMPLETE_KEY,
+  ARIA_CONTROLS_KEY,
+  ARIA_CURRENT_KEY,
+  ARIA_EXPANDED_KEY,
+  ARIA_HIDDEN_KEY,
+  ARIA_OWNS_KEY,
+  AUTOCOMPLETE_KEY,
+  DROPDOWN_CSS_CLASSES,
+  type DropdownElement,
+  type DropdownList,
+  type DropdownToggle,
+  findTextNode,
+  isHTMLAnchorElement,
+  NAME_KEY,
+  REQUIRED_KEY,
+  ROLE_KEY,
+  TABINDEX_KEY,
+} from '@finsweet/attributes-utils';
+
+import { getElementSelector, hasAttributeValue, queryElement } from '../utils/selectors';
+import type { OptionsStore } from '../utils/types';
+import { setDropdownAria } from './a11y';
+
+/**
+ * Collects the required elements/settings for the setup.
+ * @param dropdown The {@link Dropdown} element.
+ */
+export const collectSettings = (referenceElement: HTMLElement) => {
+  const optionsStore: OptionsStore = [];
+
+  const dropdown = referenceElement.closest<DropdownElement>(`.${DROPDOWN_CSS_CLASSES.dropdown}`);
+  if (!dropdown) return;
+
+  const selectElement = dropdown.querySelector('select');
+  const inputElement = dropdown.querySelector('input');
+  const navListElement = queryElement('dropdown')?.querySelector('nav');
+  const { body } = document;
+
+  if (!selectElement || !inputElement || !navListElement) return;
+
+  const dropdownToggle = dropdown.querySelector<DropdownToggle>(`.${DROPDOWN_CSS_CLASSES.dropdownToggle}`);
+  const dropdownList = dropdown.querySelector<DropdownList>(`.${DROPDOWN_CSS_CLASSES.dropdownList}`);
+
+  if (!dropdownToggle || !dropdownList) return;
+  dropdownToggle.setAttribute('disabled', 'disabled');
+
+  setDropdownAria(dropdownToggle, dropdownList);
+
+  const label = queryElement('label', { scope: dropdownToggle }) || findTextNode(dropdownToggle) || dropdownToggle;
+
+  const optionTemplate = dropdownList.querySelector(`a:not(${getElementSelector('clear')})`);
+  if (!isHTMLAnchorElement(optionTemplate)) return;
+
+  const optionsList = optionTemplate.parentElement;
+  if (!optionsList) return;
+
+  const defaultOption = Array.from(selectElement.querySelectorAll('option')).find((opt) => opt.value === '');
+
+  const noResultsTemplate = queryElement('empty', { scope: dropdown });
+  const clearDropdown = queryElement('clear', { scope: dropdown }) as HTMLElement;
+
+  for (const element of [optionTemplate]) {
+    if (!element) continue;
+
+    element.href = '#';
+    element.setAttribute(TABINDEX_KEY, '-1');
+    element.removeAttribute(ARIA_CURRENT_KEY);
+    element.remove();
+  }
+
+  const hideInitial = hasAttributeValue(referenceElement, 'hideinitial', 'true');
+  const preventClear = hasAttributeValue(referenceElement, 'preventclear', 'true');
+
+  initializeAttributes(inputElement, selectElement, navListElement, clearDropdown, preventClear);
+
+  return {
+    optionsStore,
+    selectElement,
+    dropdownToggle,
+    dropdownList,
+    label,
+    optionTemplate,
+    noResultsTemplate,
+    optionsList,
+    hideInitial,
+    preventClear,
+    inputElement,
+    clearDropdown,
+    defaultOption,
+    navListElement,
+    body,
+  };
+};
+
+/**
+ * Initializes the attributes for the dropdown.
+ * @param inputElement The input element.
+ * @param selectElement The select element.
+ * @param navListElement The nav list element.
+ * @param clearDropdown The clear dropdown element.
+ */
+const initializeAttributes = (
+  inputElement: HTMLInputElement,
+  selectElement: HTMLSelectElement,
+  navListElement: HTMLElement,
+  clearDropdown: HTMLElement,
+  preventClear: boolean
+) => {
+  inputElement?.parentElement?.setAttribute(TABINDEX_KEY, '-1');
+  if (!preventClear) inputElement?.removeAttribute(NAME_KEY);
+  inputElement?.setAttribute(TABINDEX_KEY, '0');
+  inputElement?.removeAttribute('data-name');
+  if (selectElement.hasAttribute(REQUIRED_KEY)) {
+    inputElement?.setAttribute(REQUIRED_KEY, 'required');
+  }
+  inputElement?.setAttribute(ROLE_KEY, 'combobox');
+
+  inputElement?.setAttribute(AUTOCOMPLETE_KEY, 'off');
+  const navListElementId = navListElement.getAttribute('id') || '';
+  inputElement?.setAttribute(ARIA_CONTROLS_KEY, navListElementId);
+  inputElement?.setAttribute(ARIA_OWNS_KEY, navListElementId);
+  inputElement?.setAttribute(ARIA_AUTOCOMPLETE_KEY, 'list');
+  inputElement?.setAttribute(ARIA_EXPANDED_KEY, 'false');
+
+  selectElement.setAttribute(ARIA_HIDDEN_KEY, 'true');
+  selectElement.setAttribute(TABINDEX_KEY, '-1');
+
+  navListElement.setAttribute(TABINDEX_KEY, '-1');
+
+  clearDropdown?.setAttribute(TABINDEX_KEY, '0');
+  clearDropdown?.setAttribute(ROLE_KEY, 'button');
+  clearDropdown.style.display = 'none';
+};

package/attributes-master/packages/combobox/src/actions/state.ts

@@ -0,0 +1,34 @@
+import { ARIA_SELECTED_KEY, CURRENT_CSS_CLASS, setFormFieldValue, TABINDEX_KEY } from '@finsweet/attributes-utils';
+
+import { toggleDropdown } from '../utils';
+import type { OptionData, Settings } from '../utils/types';
+
+/**
+ * Sets the selected state to an option and removes it from a previous one, if existing.
+ * This also determines whether the close icon should show or hide
+ * @param settings The instance {@link Settings}.
+ * @param selectedOption The selected {@link OptionData}, if existing.
+ * @param {boolean} close if dropdown should be closed or opened
+ */
+export const updateOptionsState = (settings: Settings, selectedOption?: OptionData, close = false) => {
+  const { selectElement, optionsStore } = settings;
+
+  if (selectedOption && selectedOption.value) {
+    setFormFieldValue(selectElement, selectedOption.value);
+  }
+
+  for (const optionData of optionsStore) {
+    const { element } = optionData;
+
+    const selected = element === selectedOption?.element;
+
+    optionData.selected = selected;
+    optionData.focused = selected;
+
+    element.classList[selected ? 'add' : 'remove'](CURRENT_CSS_CLASS);
+    element.setAttribute(ARIA_SELECTED_KEY, `${selected}`);
+    element.setAttribute(TABINDEX_KEY, '-1');
+  }
+
+  if (close) toggleDropdown(settings);
+};

package/attributes-master/packages/combobox/src/index.ts

@@ -0,0 +1,3 @@
+export { version } from '../package.json';
+export { init } from './init';
+export { ELEMENTS, SETTINGS } from './utils/constants';