@ongov/ontario-design-system-component-library 4.3.1-alpha.1 → 5.0.0-alpha.10

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

@@ -1,4 +1,4 @@
-import { CardType, HeaderType, HorizontalImagePositionType, HorizontalImageSizeType } from './ontario-card-types';
+import { HeaderColour, HorizontalImagePositionType, HorizontalImageSizeType, Layout } from './ontario-card-types';
 export declare class OntarioCard {
 	host: HTMLElement;
 	/**
@@ -32,18 +32,18 @@ export declare class OntarioCard {
 	 */
 	cardLink?: string;
 	/**
-	 * The type of card to render.
+	 * The layout oritnetation of the card.
 	 *
-	 * If no type is passed, it will default to 'basic'.
+	 * If no type is passed, it will default to 'vertical'.
 	 *
 	 */
-	cardType: CardType;
+	layout?: Layout;
 	/**
-	 * The type of header to render.
+	 * Set the card's header colour.
 	 *
-	 * If no type is passed, it will default to 'default'.
+	 * This is optional.
 	 */
-	headerType: HeaderType;
+	headerColour?: HeaderColour;
 	/**
 	 * The position of the image when the card-type is set to 'horizontal'.
 	 *
@@ -87,43 +87,54 @@ export declare class OntarioCard {
 	ariaLabelText?: string;
 	/**
 	 * Mutable variable, for internal use only.
-	 * Set the card's type depending on validation result.
+	 * Set the card's layout depending on validation result.
 	 */
-	private cardTypeState;
+	private layoutState;
 	/**
-	 * Mutable variable, for internal use only.
-	 * Set the card's header type depending on validation result.
+	 * Watch for changes to the `layout` property for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
+	 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
 	 */
-	private headerTypeState;
+	validateLayout(): void;
 	/**
-	 * Watch for changes to the `cardType` property for validation purposes.
+	 * Watch for changes to the `headerColour` property for validation purposes.
 	 *
-	 * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).
-	 * If a match is found in one of the array values then `cardType` will be set to the matching array key value.
+	 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+	 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 	 */
-	validateCardType(): void;
+	validateHeaderColour(): void;
 	/**
-	 * Watch for changes to the `headerType` property for validation purposes.
-	 *
-	 * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).
-	 * If a match is found in one of the array values then `headerType` will be set to the matching array key value.
+	 * Print the invalid `layout` prop warning message.
+	 */
+	private warnDefaultLayout;
+	/**
+	 * Print the invalid `headerColour` prop warning message.
 	 */
-	validateHeaderType(): void;
+	private warnDefaultHeaderColour;
 	/**
-	 * Print the invalid `cardType` prop warning message.
-	 * @returns default type (basic).
+	 * Returns the top level classes of the card.
+	 *
+	 * @returns {string}
 	 */
-	private warnDefaultCardType;
+	private getCardClasses;
 	/**
-	 * Print the invalid `headerType` prop warning message.
-	 * @returns default type (default).
+	 * Returns the heading classes of the card.
+	 *
+	 * @returns {string}
 	 */
-	private warnDefaultHeaderType;
+	private getCardHeadingClasses;
 	/**
-	 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
+	 * Returns the url that the card links to.
+	 *
+	 * @returns {string}
 	 */
-	private getClass;
 	private getHref;
+	/**
+	 * Component life cycle hook.
+	 *
+	 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+	 */
 	componentWillLoad(): void;
 	render(): any;
 }

package/dist/types/components/ontario-date-input/utils/date-validation-utils.d.ts

@@ -1,5 +1,19 @@
 import { DateValidatorReturnType } from '../ontario-date-input-interface';
 import { Translations } from '../../../translations';
+/**
+ * Valid value year against minimum and maximum year range (defaulted if not provided.)
+ *
+ * Year field should be a number and not written out; it has no concept of positive and negative.
+ *
+ * Suggestion:
+ * - `< 0` B.C.E.
+ * - `>= 0` A.C.E.
+ *
+ * @param value value to check for validity
+ * @param minYear minimum valid year to validate against
+ * @param maxYear maximum valid year to validate against
+ */
+export declare const isInvalidYear: (value: string | number, minYear?: number, maxYear?: number) => boolean;
 type GetDateErrorArg = {
 	dayValue: string;
 	monthValue: string;

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

@@ -1,19 +1,21 @@
 export type OntarioFooterType = 'default' | 'twoColumn' | 'threeColumn';
 export interface FooterLink {
-	text?: string;
+	text: string;
 	href: string;
 }
 export interface FooterLinks {
-	accessibilityLink?: Partial<FooterLink>;
-	privacyLink?: Partial<FooterLink>;
+	accessibilityLink?: FooterLink;
+	privacyLink?: FooterLink;
 	contactLink?: FooterLink;
-	printerLink?: Partial<FooterLink>;
+	printerLink?: FooterLink;
+	termsOfUseLink?: FooterLink;
 }
 export interface SimpleFooterLinks {
-	accessibilityLink: Required<FooterLink>;
-	privacyLink: Required<FooterLink>;
-	printerLink: Required<FooterLink>;
-	contactLink?: Required<FooterLink>;
+	accessibilityLink: FooterLink;
+	privacyLink: FooterLink;
+	printerLink: FooterLink;
+	contactLink?: FooterLink;
+	termsOfUseLink?: FooterLink;
 }
 export type FooterContentType = 'text' | 'list' | 'html';
 export type HeadingLevelType = 'h2' | 'h3' | 'h4' | 'h5' | 'h6';

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

@@ -13,7 +13,7 @@ export declare class OntarioFooter {
 	type: OntarioFooterType;
 	/**
 	 * A prop that stores the required links for all footers.
-	 * Available options are 'accessibilityLink', 'privacyLink', 'contactLink' and 'printerLink'
+	 * Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'
 	 */
 	footerLinks: FooterLinks | string;
 	/**

package/dist/types/components/ontario-search-box/ontario-search-box.d.ts

@@ -0,0 +1,180 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { Language } from '../../utils/common/language-types';
+import { Hint } from '../../utils/common/common.interface';
+import {
+	InputFocusBlurEvent,
+	InputInteractionEvent,
+	InputInputEvent,
+} from '../../utils/events/event-handler.interface';
+import { Caption } from '../../utils/common/input-caption/caption.interface';
+export declare class OntarioSearchBox {
+	element: HTMLElement;
+	internals: ElementInternals;
+	/**
+	 * This Ref is used get a direct reference to the hint text element
+	 */
+	private hintTextRef?;
+	/**
+	 * This Ref is used get a direct reference to the search input element
+	 */
+	private inputFieldRef?;
+	/**
+	 * The language of the component.
+	 * This is used for translations. If none is passed, it will default to English.
+	 */
+	language?: Language;
+	/**
+	 * The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.
+	 */
+	elementId?: string;
+	/**
+	 * The value of the search term.
+	 * This is optional.
+	 */
+	value?: string;
+	/**
+    * The text to display as the input label
+    *
+    * @example
+    * <ontario-search-box
+    *      caption='{
+                    "captionText": "Search directory",
+                    "captionType": "default"
+                    }'
+                required = "true"
+    >
+    </ontario-search-box>
+    */
+	caption: Caption | string;
+	/**
+	 * This is used to determine whether the dropdown list is required or not.
+	 * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.
+	 * If no prop is set, it will default to false (optional).
+	 */
+	required?: boolean;
+	/**
+	 * This Function to perform a search operation.
+	 * This function will be called when the search submit button is triggered.
+	 * The value argument is used for as search term to use for the search operation. This parameter is optional.
+	 * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.
+	 *
+	 * @example
+	 * <ontario-search-box
+	 *	  id="ontario-search-box"
+	 *	  caption='Search directory'
+	 * ></ontario-search-box>
+	 *
+	 * <script>
+	 *	window.addEventListener('load', () => {
+	 *		const searchBox = document.getElementById('ontario-search-box');
+	 *		searchBox.performSearch = async (value) => {
+	 * 			console.log('Performing search with value:', value);
+	 *		};
+	 *	});
+	 * </script>
+	 */
+	performSearch?: (value?: string) => Promise<void>;
+	/**
+	 * Used to include the ontario-hint-text component for the search-box.
+	 * This is optional.
+	 */
+	hintText?: string | Hint;
+	/**
+	 * Used to add a custom function to the input onInput event.
+	 */
+	customOnInput?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onChange event.
+	 */
+	customOnChange?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onBlur event.
+	 */
+	customOnBlur?: (event: globalThis.Event) => void;
+	/**
+	 * Used to add a custom function to the input onFocus event.
+	 */
+	customOnFocus?: (event: globalThis.Event) => void;
+	/**
+	 * Emitted when the search is submitted.
+	 * Below is an example on how to hook into the event to get the event details.
+	 *
+	 * @example
+	 *	<script>
+	 *		document.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {
+	 *	 		const searchValue = event.detail;
+	 *			console.log('Search submitted with value:', searchValue);
+	 *	  };
+	 * 	</script>
+	 */
+	searchOnSubmit: EventEmitter<string>;
+	/**
+	 * Emitted when a input  occurs when an input has been changed.
+	 */
+	inputOnInput: EventEmitter<InputInputEvent>;
+	/**
+	 * Emitted when a keyboard input or mouse event occurs when an input has been changed.
+	 */
+	inputOnChange: EventEmitter<InputInteractionEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has lost focus.
+	 */
+	inputOnBlur: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * Emitted when a keyboard input event occurs when an input has gained focus.
+	 */
+	inputOnFocus: EventEmitter<InputFocusBlurEvent>;
+	/**
+	 * The hint text options are re-assigned to the internalHintText array.
+	 */
+	private internalHintText;
+	/**
+	 * Instantiate an InputCaption object for internal logic use
+	 */
+	private captionState;
+	/**
+	 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.
+	 */
+	hintTextId: string | null | undefined;
+	/**
+	 * Watch for changes to the `hintText` prop.
+	 *
+	 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.
+	 */
+	private parseHintText;
+	/**
+	 * Watch for changes to the `caption` prop.
+	 *
+	 * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.
+	 * @param newValue: Caption | string
+	 */
+	private updateCaptionState;
+	/**
+	 * Watch for changes to the `language` prop to render either the English or French translations
+	 */
+	updateLanguage(): void;
+	/**
+	 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.
+	 */
+	componentDidLoad(): Promise<void>;
+	componentWillLoad(): void;
+	/**
+	 * Function to handle input events and the information pertaining to the input to emit.
+	 */
+	private handleEvent;
+	/**
+	 * handleSearch function is called when the search submit button is clicked
+	 */
+	handleSearch(event: MouseEvent): Promise<void>;
+	getId(): string;
+	private getValue;
+	/**
+	 *This function ensures that the focus returns to the search input field when the reset button is clicked.
+	 */
+	private setFocus;
+	/**
+	 * when the reset button is clicked this function gets called
+	 */
+	handleFocus: () => void;
+	render(): any;
+}