@ongov/ontario-design-system-component-library 6.0.0-alpha.4 → 6.0.0-alpha.6

package/dist/types/components/ontario-header/ontario-header.d.ts

@@ -1,5 +1,8 @@
-import { MenuItem, ApplicationHeaderInfo, LanguageToggleOptions, OntarioHeaderType } from './ontario-header.interface';
+import { EventEmitter } from '../../stencil-public-runtime';
+import { ApplicationHeaderInfo, LanguageToggleOptions, OntarioHeaderType } from './ontario-header.interface';
 import { Language } from '../../utils/common/language-types';
+import { MenuItem } from '../../utils/common/common.interface';
+import { DeviceType } from '../../utils/helper/utils-types';
 export declare class OntarioHeader {
 	el: HTMLElement;
 	/**
@@ -17,10 +20,13 @@ export declare class OntarioHeader {
 	 *    application-header-info='{
 	 *      "title": "Application name",
 	 *      "href": "/application-homepage",
-	 *      "maxSubheaderDesktopLinks": "3",
-	 *      "maxSubheaderTabletLinks": "2",
-	 *      "maxSubheaderMobileLinks": "1"
-	 *    }'>
+	 *		"maxSubheaderLinks": {
+	 *			"desktop": "3",
+	 *			"tablet": "2",
+	 *			"mobile": "1"
+	 *		}
+	 *    }'
+	 *	>
 	 *  </ontario-header>
 	 */
 	applicationHeaderInfo: ApplicationHeaderInfo | string;
@@ -132,26 +138,26 @@ export declare class OntarioHeader {
 	/**
 	 * Toggler for the menu and the search button
 	 */
-	menuToggle: boolean;
+	menuToggled: boolean;
 	searchToggle?: boolean;
-	/**
-	 * Assigning values to elements to use them as ref
-	 */
-	header: HTMLElement;
-	menuButton: HTMLElement;
-	menuButtonDesktop: HTMLElement;
-	menuButtonTablet: HTMLElement;
-	menuButtonMobile: HTMLElement;
-	searchBar: HTMLInputElement;
-	searchButton: HTMLInputElement;
 	translations: any;
+	breakpointDeviceState: DeviceType;
 	private parseApplicationHeaderInfo;
 	parseMenuItems(): void;
 	private parseLanguage;
+	handleKeyDown(event: KeyboardEvent): void;
 	/**
 	 * Logic to close the menu when anything outside the menu is clicked
 	 */
 	handleClick(event: any): void;
+	/**
+	 * Logic to close the menu when the focus leaves the menu
+	 */
+	handleFocusOut(event: FocusEvent): void;
+	/**
+	 * Logic to set breakpointDeviceState to the appropriate device when the screen resizes
+	 */
+	handleResize(): void;
 	/**
 	 * This listens for the `setAppLanguage` event sent from the language toggle when it is is connected to the DOM.
 	 * It is used for the initial language when the input component loads.
@@ -167,10 +173,16 @@ export declare class OntarioHeader {
 			newLanguage: Language;
 		}>,
 	): void;
+	/**
+	 * This event is toggled when the menu button is pressed.
+	 * The <ontario-header-overflow-menu> sub-component listens for this event
+	 * To trigger the showing and hiding of the overflow menu.
+	 */
+	menuButtonToggled: EventEmitter<boolean>;
 	/**
 	 * Logic to handle the menu toggling
 	 */
-	handleMenuToggle: () => void;
+	handlemenuToggled: () => void;
 	/**
 	 * Logic to handle the search toggling
 	 */
@@ -183,7 +195,7 @@ export declare class OntarioHeader {
 	/**
 	 * Logic to make the focus go back to the menu button when the list ends
 	 */
-	trapMenuFocus: (e: any) => void;
+	focusMenuButton(): void;
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
 	 */
@@ -214,35 +226,12 @@ export declare class OntarioHeader {
 	 * @returns The full image path as a string.
 	 */
 	private getImageAssetSrcPath;
-	/**
-	 * This function generates the menu items in a <li>, accordingly, to the given parameters.
-	 *
-	 * href and title are necessary, but rest are not.
-	 *
-	 * @param href - the href of the menu item
-	 * @param title - the title of the menu item
-	 * @param linkIsActive - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is
-	 * @param liClass - if there is a class that is related to the <a> portion of the menu item, put it here
-	 * @param onClick - for any custom onClick event a user might want to add to their menu links
-	 * @param onBlur - when set to true, it will call the function trapMenuFocus(), otherwise nothing is done (used in lastLink)
-	 */
-	private generateMenuItem;
 	/**
 	 * This function generates the menu dropdown button for the ontario header component.
 	 *
 	 * @param viewportSize - the size of the screen where the function is being called. It can either be set to `desktop`, `tablet` or `mobile`. This dictates the classes used on the menu button, as well as the ref to keep the focus trapped when the menu is open.
 	 */
 	private renderMenuButton;
-	/**
-	 * A helper function to generate navigation dropdown links with onBlur functionality. This is used for the application header.
-	 *
-	 * @param item - the menu item to be looped over (contains the title and href)
-	 * @param index
-	 * @param links - the number of links associated with the maxSubheader[size]Links in the application header info prop. This will determine how many links should be displayed in the dropdown.
-	 * @param viewportSize - the size of the viewport. It can be set to `desktop`, `tablet` or `mobile`.
-	 * @returns
-	 */
-	private generateNavigationLinks;
 	/**
 	 * The onEscapePressed function clears the searchbar form when Escape is pressed
 	 */
@@ -252,11 +241,17 @@ export declare class OntarioHeader {
 	componentDidLoad(): void;
 	componentDidRender(): void;
 	/**
-	 * Handles the focus when menu/toggle button is clicked.
+	 * Handles the search focus when the search toggle button is clicked.
 	 * When search button is clicked, the search bar is in focus,
 	 * when the closed button is clicked, the search button is back into focus.
-	 * When the menu is closed, the menu button should be out of focus.
 	 */
 	componentDidUpdate(): void;
+	/**
+	 * Assigning values to elements to use them as ref
+	 */
+	header: HTMLElement;
+	menuButton: HTMLElement;
+	searchBar: HTMLInputElement;
+	searchButton: HTMLInputElement;
 	render(): any;
 }

package/dist/types/components/ontario-header/ontario-header.interface.d.ts

@@ -1,16 +1,13 @@
 import { DrupalMenuMachineName } from './ontario-header.enum';
-export interface MenuItem {
-	title: string;
-	href: string;
-	linkIsActive?: boolean;
-	onClickHandler?: (event: Event) => void;
-}
 export interface ApplicationHeaderInfo {
 	title: string;
 	href?: string;
-	maxSubheaderDesktopLinks?: number;
-	maxSubheaderTabletLinks?: number;
-	maxSubheaderMobileLinks?: number;
+	maxSubheaderLinks?: maxSubheaderLinks;
+}
+interface maxSubheaderLinks {
+	desktop?: number;
+	tablet?: number;
+	mobile?: number;
 }
 export interface LanguageToggleOptions {
 	englishLink: string;
@@ -23,3 +20,4 @@ export interface OntarioMenuItems {
 	'drupal-menu-machine-name': DrupalMenuMachineName[];
 }
 export type OntarioHeaderType = 'application' | 'ontario' | 'serviceOntario';
+export {};

package/dist/types/components/ontario-header-overflow-menu/ontario-header-overflow-menu.d.ts

@@ -0,0 +1,91 @@
+import { MenuItem } from '../../utils/common/common.interface';
+export declare class OntarioHeaderOverflowMenu {
+	el: HTMLElement;
+	/**
+	 * The items that will go inside the menu.
+	 *
+	 *  @example
+	 * 	<ontario-header-overflow-menu
+	 *			menu-items='[{
+	 *				"title": "Link 1",
+	 *				"href": "/link-1"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Link 2",
+	 *				"href": "/link-2"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Link 3",
+	 *				"href": "/link-3"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Link 4",
+	 *				"href": "/link-4"
+	 *				"linkIsActive": "false"
+	 *			}]'>
+	 *	</ontario-header-overflow-menu>
+	 */
+	menuItems: MenuItem[] | string;
+	/**
+	 * The `menuItems` are reassigned to `menuItemState` for parsing by `parseMenuItems()`.
+	 */
+	private menuItemState;
+	/**
+	 * A state variable to determine whether the menu is open or not.
+	 *
+	 * The boolean values map to eitherthe presence (true) or absense (false)
+	 * of the `ontario-navigation--open` on the `nav` element.
+	 *
+	 * Triggered by either the `menuButtonToggled` event or the `click` event.
+	 */
+	private menuIsOpen;
+	/**
+	 * The current index of the menu item that is focused.
+	 */
+	private currentIndex;
+	/**
+	 * Resets the `currentIndex` value.
+	 *
+	 * Typically resets when the menu closes.
+	 */
+	private resetCurrentIndex;
+	/**
+	 * Updates the `currentIndex` value.
+	 *
+	 * Typically occurs when a user uses the keyboard to tab through
+	 * menu items.
+	 */
+	private updateCurrentIndex;
+	parseMenuItems(): void;
+	/**
+	 * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.
+	 * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.
+	 */
+	toggleMenuVisibility(event: CustomEvent<boolean>): void;
+	/**
+	 * Listens for clicks on anything outside of the menu.
+	 * If a click is outside of the menu, then the menu will
+	 * close.
+	 */
+	handleClick(event: PointerEvent): void;
+	/**
+	 * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.
+	 */
+	handleKeyDown(event: KeyboardEvent): void;
+	/**
+	 * Updates the aria-live region with the menu item count and selected option.
+	 *
+	 * @param {number} selectedIndex The index of the selected menu item
+	 */
+	private updateAriaLive;
+	componentWillLoad(): void;
+	/**
+	 * Assigning values to elements to use them as ref
+	 */
+	private menu;
+	/**
+	 * The aria-live region that will be updated with the selected menu item.
+	 */
+	private ariaLiveRegion;
+	render(): any;
+}

package/dist/types/components.d.ts

@@ -15,7 +15,7 @@ import {
 } from './utils/components/callout-aside/callout-aside.interface';
 import { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 import { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
-import { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+import { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 import {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -49,7 +49,6 @@ import { FooterSocialLinksProps } from './components/ontario-footer/components';
 import {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 import { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -70,7 +69,7 @@ export {
 } from './utils/components/callout-aside/callout-aside.interface';
 export { BadgeColour } from './components/ontario-badge/ontario-badge.types';
 export { ButtonType, HtmlType } from './components/ontario-button/ontario-button.types';
-export { HeadingLevel, Hint, HintContentType } from './utils/common/common.interface';
+export { HeadingLevel, Hint, HintContentType, MenuItem } from './utils/common/common.interface';
 export {
 	HeaderColour,
 	HorizontalImagePositionType,
@@ -104,7 +103,6 @@ export { FooterSocialLinksProps } from './components/ontario-footer/components';
 export {
 	ApplicationHeaderInfo,
 	LanguageToggleOptions,
-	MenuItem,
 	OntarioHeaderType,
 } from './components/ontario-header/ontario-header.interface';
 export { IconColour, IconSize } from './components/ontario-icon/icon.types';
@@ -530,7 +528,7 @@ export namespace Components {
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo: ApplicationHeaderInfo | string;
 		/**
@@ -567,6 +565,13 @@ export namespace Components {
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -2396,6 +2401,10 @@ export interface OntarioDropdownListCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioDropdownListElement;
 }
+export interface OntarioHeaderCustomEvent<T> extends CustomEvent<T> {
+	detail: T;
+	target: HTMLOntarioHeaderElement;
+}
 export interface OntarioHintExpanderCustomEvent<T> extends CustomEvent<T> {
 	detail: T;
 	target: HTMLOntarioHintExpanderElement;
@@ -2717,11 +2726,66 @@ declare global {
 		prototype: HTMLOntarioFormContainerElement;
 		new (): HTMLOntarioFormContainerElement;
 	};
-	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {}
+	interface HTMLOntarioHeaderElementEventMap {
+		menuButtonToggled: boolean;
+	}
+	interface HTMLOntarioHeaderElement extends Components.OntarioHeader, HTMLStencilElement {
+		addEventListener<K extends keyof HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[K]>,
+			) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		addEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | AddEventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLOntarioHeaderElementEventMap>(
+			type: K,
+			listener: (
+				this: HTMLOntarioHeaderElement,
+				ev: OntarioHeaderCustomEvent<HTMLOntarioHeaderElementEventMap[K]>,
+			) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof DocumentEventMap>(
+			type: K,
+			listener: (this: Document, ev: DocumentEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener<K extends keyof HTMLElementEventMap>(
+			type: K,
+			listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
+			options?: boolean | EventListenerOptions,
+		): void;
+		removeEventListener(
+			type: string,
+			listener: EventListenerOrEventListenerObject,
+			options?: boolean | EventListenerOptions,
+		): void;
+	}
 	var HTMLOntarioHeaderElement: {
 		prototype: HTMLOntarioHeaderElement;
 		new (): HTMLOntarioHeaderElement;
 	};
+	interface HTMLOntarioHeaderOverflowMenuElement extends Components.OntarioHeaderOverflowMenu, HTMLStencilElement {}
+	var HTMLOntarioHeaderOverflowMenuElement: {
+		prototype: HTMLOntarioHeaderOverflowMenuElement;
+		new (): HTMLOntarioHeaderOverflowMenuElement;
+	};
 	interface HTMLOntarioHintExpanderElementEventMap {
 		toggleExpanderEvent: MouseEvent | KeyboardEvent;
 	}
@@ -3709,6 +3773,7 @@ declare global {
 		'ontario-footer': HTMLOntarioFooterElement;
 		'ontario-form-container': HTMLOntarioFormContainerElement;
 		'ontario-header': HTMLOntarioHeaderElement;
+		'ontario-header-overflow-menu': HTMLOntarioHeaderOverflowMenuElement;
 		'ontario-hint-expander': HTMLOntarioHintExpanderElement;
 		'ontario-hint-text': HTMLOntarioHintTextElement;
 		'ontario-icon-accessibility': HTMLOntarioIconAccessibilityElement;
@@ -4322,7 +4387,7 @@ declare namespace LocalJSX {
 	interface OntarioHeader {
 		/**
 		 * Information pertaining to the application header. This is only necessary for the 'application' header type.  This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
-		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage",      "maxSubheaderDesktopLinks": "3",      "maxSubheaderTabletLinks": "2",      "maxSubheaderMobileLinks": "1"    }'>  </ontario-header>
+		 * @example  <ontario-header    type="application"    application-header-info='{      "title": "Application name",      "href": "/application-homepage", 	"maxSubheaderLinks": { 		"desktop": "3", 		"tablet": "2", 		"mobile": "1" 	}    }' >  </ontario-header>
 		 */
 		applicationHeaderInfo?: ApplicationHeaderInfo | string;
 		/**
@@ -4353,12 +4418,23 @@ declare namespace LocalJSX {
 		 * The items that will go inside the menu.
 		 */
 		menuItems?: MenuItem[] | string;
+		/**
+		 * This event is toggled when the menu button is pressed. The <ontario-header-overflow-menu> sub-component listens for this event To trigger the showing and hiding of the overflow menu.
+		 */
+		onMenuButtonToggled?: (event: OntarioHeaderCustomEvent<boolean>) => void;
 		/**
 		 * The type of header.
 		 * @default 'application'
 		 */
 		type?: OntarioHeaderType;
 	}
+	interface OntarioHeaderOverflowMenu {
+		/**
+		 * The items that will go inside the menu.
+		 * @example <ontario-header-overflow-menu 	menu-items='[{ 		"title": "Link 1", 		"href": "/link-1" 		"linkIsActive": "false" 	},{ 		"title": "Link 2", 		"href": "/link-2" 		"linkIsActive": "false" 	},{ 		"title": "Link 3", 		"href": "/link-3" 		"linkIsActive": "false" 	},{ 		"title": "Link 4", 		"href": "/link-4" 		"linkIsActive": "false" 	}]'> </ontario-header-overflow-menu>
+		 */
+		menuItems?: MenuItem[] | string;
+	}
 	interface OntarioHintExpander {
 		/**
 		 * Content to display as the hint, once the expander is toggled open. Please note that any content that is passed into this prop will only be displayed as a string. If you would like to add HTML content, supply child content to the component.
@@ -6273,6 +6349,7 @@ declare namespace LocalJSX {
 		'ontario-footer': OntarioFooter;
 		'ontario-form-container': OntarioFormContainer;
 		'ontario-header': OntarioHeader;
+		'ontario-header-overflow-menu': OntarioHeaderOverflowMenu;
 		'ontario-hint-expander': OntarioHintExpander;
 		'ontario-hint-text': OntarioHintText;
 		'ontario-icon-accessibility': OntarioIconAccessibility;
@@ -6427,6 +6504,8 @@ declare module '@stencil/core' {
 			'ontario-footer': LocalJSX.OntarioFooter & JSXBase.HTMLAttributes<HTMLOntarioFooterElement>;
 			'ontario-form-container': LocalJSX.OntarioFormContainer & JSXBase.HTMLAttributes<HTMLOntarioFormContainerElement>;
 			'ontario-header': LocalJSX.OntarioHeader & JSXBase.HTMLAttributes<HTMLOntarioHeaderElement>;
+			'ontario-header-overflow-menu': LocalJSX.OntarioHeaderOverflowMenu &
+				JSXBase.HTMLAttributes<HTMLOntarioHeaderOverflowMenuElement>;
 			'ontario-hint-expander': LocalJSX.OntarioHintExpander & JSXBase.HTMLAttributes<HTMLOntarioHintExpanderElement>;
 			/**
 			 * Use hint text to help users understand how to complete fields in a form.

package/dist/types/utils/common/common.enum.d.ts

@@ -0,0 +1,5 @@
+export declare enum DeviceTypes {
+	Mobile = 'mobile',
+	Tablet = 'tablet',
+	Desktop = 'desktop',
+}

package/dist/types/utils/common/common.interface.d.ts

@@ -85,3 +85,12 @@ export declare const headingLevelDefinitions: readonly ['h2', 'h3', 'h4', 'h5',
  * https://steveholgado.com/typescript-types-from-arrays/
  */
 export type HeadingLevel = (typeof headingLevelDefinitions)[number];
+/**
+ * Used in both ontario-header and ontario-header-overflow-menu.
+ */
+export interface MenuItem {
+	title: string;
+	href: string;
+	linkIsActive?: boolean;
+	onClickHandler?: (event: Event) => void;
+}

package/dist/types/utils/common/common.variables.d.ts

@@ -1,2 +1,20 @@
 export declare const minimumGridColumns = 1;
 export declare const maximumGridColumns = 12;
+/**
+ * Numeric screen breakpoint values pulled from the design tokens package.
+ * By default these come in as strings as they have units attached to them
+ * (e.g. '40em').
+ *
+ * However for comparision calculations we need the true numeric value.
+ *
+ * The Number() method only matches numerical values to begin with.
+ * However for further clarity I'm showing a replace on the
+ * regex /\D/g match, which matches againt any non-numeric characters,
+ * and is replacing it with nothing.
+ */
+export declare const ScreenBreakpoints: {
+	Small: number;
+	Medium: number;
+	Large: number;
+};
+export declare const standardFontSizePx = 16;

package/dist/types/utils/components/header/header-menu-items.d.ts

@@ -0,0 +1,18 @@
+/**
+ * This function generates the menu items in a <li>, accordingly, to the given parameters.
+ *
+ * href and title are necessary, but rest are not.
+ *
+ * @param {string} href - the href of the menu item
+ * @param {string} title - the title of the menu item
+ * @param {boolean} [linkIsActive] - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is
+ * @param {string} [liClass] - if there is a class that is related to the <a> portion of the menu item, put it here
+ * @param {function(PointerEvent): void} [onClickHandler] - for any custom onClick functionality a user might want to add to their menu links
+ */
+export declare const generateMenuItem: (
+	href: string,
+	title: string,
+	linkIsActive?: boolean,
+	liClass?: string,
+	onClickHandler?: (e: PointerEvent) => void,
+) => any;

package/dist/types/utils/helper/utils-types.d.ts

@@ -1,2 +1,4 @@
+import { DeviceTypes } from '../common/common.enum';
+export type DeviceType = `${DeviceTypes}`;
 export declare const conjunctions: readonly ['and', 'or'];
 export type Conjunction = (typeof conjunctions)[number];

package/dist/types/utils/helper/utils.d.ts

@@ -1,4 +1,4 @@
-import { Conjunction } from './utils-types';
+import { DeviceType, Conjunction } from './utils-types';
 export declare function format(first: string | undefined, middle: string | undefined, last: string | undefined): string;
 export declare function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean;
 export declare function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]>;
@@ -13,6 +13,22 @@ export declare function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T
  */
 export declare function isNumber(value: string | number): boolean;
 export declare function isEmpty(str: string | undefined | null): boolean;
+/**
+ * Takes a string value of "true" and converts it to boolean true.
+ *
+ * All other values are converted to boolean false.
+ *
+ * Has advantages over the built in JavaScript Boolean() constructor / function.
+ *
+ * Using Boolean() could lead to unexpected results.
+ *
+ * e.g. Boolean("false") evaluates to a boolean value of true.
+ *
+ * @param {string} value - The value you would like to convert to a boolean.
+ *
+ * @returns {boolean}
+ */
+export declare function convertStringToBoolean(value: string): boolean;
 /**
  * Retrieves the keys from an enum and lists them in an array.
  *
@@ -41,3 +57,9 @@ export declare function printArray(arr: Array<any>, conjunctionType?: Conjunctio
  * @returns {HTMLElement}
  */
 export declare function getRootHTMLElement(): HTMLElement;
+/**
+ * Determines the device type based on screen breakpoints.
+ *
+ * @returns {DeviceType}
+ */
+export declare function determineDeviceType(): DeviceType;