@ongov/ontario-design-system-component-library 6.0.0-alpha.5 → 6.0.0-alpha.8

package/components/p-CeFeBwzQ.js

@@ -0,0 +1,331 @@
+import { h } from './index.js';
+import { C as CaptionTypes } from './p-DMH_JI3w.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+
+var MessageContentType;
+(function (MessageContentType) {
+	MessageContentType['UndefinedCaptionObject'] = 'undefinedCaptionObject';
+	MessageContentType['UndefinedCaptionText'] = 'undefinedCaption';
+	MessageContentType['EmptyCaptionText'] = 'emptyCaption';
+	MessageContentType['UndefinedCaptionType'] = 'undefinedCaptionType';
+	MessageContentType['IncorrectCaptionType'] = 'incorrectCaptionType';
+})(MessageContentType || (MessageContentType = {}));
+
+class InputCaption {
+	/**
+	 * Set the class members
+	 * Output a console warning message if the provided `label` type is incorrect
+	 * @param caption object containing the essential data to configure the input label
+	 */
+	constructor(componentTagName, caption, translations, language, isLegend = false, required = false) {
+		/**
+		 * The type of caption to render.
+		 */
+		this.captionType = 'default';
+		/**
+		 * Determine whether the input field is required.
+		 */
+		this.required = false;
+		/**
+		 * Determine whether the rendered element is a `<label>` or `<legend>`.
+		 */
+		this.isLegend = false;
+		this.language = 'en';
+		/**
+		 * Return the `<label>` element for text inputs
+		 * @param captionFor Set the `htmlFor` attribute
+		 * @param hasHintExpander Indicate whether the component the label is for has a hint expander or not
+		 * @param disableRequiredFlag Disable the required/optional label text _(only use in highly special cases)_
+		 * @returns element containing the caption for the input
+		 */
+		this.getCaption = (captionFor, hasHintExpander = false, disableRequiredFlag = false) => {
+			const captionText = this.captionText && this.captionText.toLowerCase();
+			const captionContent = this.isLegend
+				? h(
+						'legend',
+						{ class: this.getClass() },
+						this.captionType === 'heading' ? h('h1', null, this.captionText) : this.captionText,
+						!disableRequiredFlag && this.getRequiredFlagElement(),
+						hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false),
+					)
+				: h(
+						'label',
+						{ htmlFor: captionFor, class: this.getClass() },
+						this.captionText,
+						!disableRequiredFlag && this.getRequiredFlagElement(),
+						hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false),
+					);
+			// with `this.captionType` already set to one of the enum values, the comparison no longer needs the `toLowerCase()` transform
+			return this.captionType === 'heading' && !this.isLegend ? h('h1', null, captionContent) : captionContent;
+		};
+		let captionObject;
+		if (typeof caption === 'string') {
+			try {
+				captionObject = JSON.parse(caption);
+			} catch (_a) {
+				captionObject = { captionText: caption, captionType: 'default' };
+			}
+		} else {
+			captionObject = caption;
+		}
+		this.componentTagName = componentTagName.toLocaleLowerCase();
+		this.captionText = captionObject === null || captionObject === void 0 ? void 0 : captionObject.captionText;
+		this.captionType =
+			((captionObject === null || captionObject === void 0 ? void 0 : captionObject.captionType) &&
+				CaptionTypes.find((type) => {
+					var _a;
+					return type === ((_a = captionObject.captionType) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+				})) ||
+			'default';
+		this.required = required;
+		this.isLegend = isLegend;
+		this.translations = translations;
+		this.language = language;
+		this.validateCaption(this);
+	}
+	getHintExpanderAccessibilityText(captionText, hasHintExpanderOnOption = false) {
+		const multipleOptionsMessage = h(
+			'span',
+			{ class: 'ontario-show-for-sr' },
+			this.translations.accessibility.moreInfo[this.language],
+			' "',
+			captionText.toLowerCase(),
+			'"',
+			' ',
+			this.translations.accessibility.checkboxHintExpander[this.language],
+		);
+		const singleOptionMessage = h(
+			'span',
+			{ class: 'ontario-show-for-sr' },
+			this.translations.accessibility.moreInfo[this.language],
+			' "',
+			captionText.toLowerCase(),
+			'"',
+			' ',
+			this.translations.accessibility.singleHintExpander[this.language],
+		);
+		return this.componentTagName === 'ontario-checkboxes'
+			? !hasHintExpanderOnOption
+				? multipleOptionsMessage
+				: singleOptionMessage
+			: singleOptionMessage;
+	}
+	/**
+	 * Determines which flag text to use between `required` and `optional`
+	 * @returns `required` or `optional` flag text
+	 */
+	getRequiredFlagText() {
+		return this.required
+			? this.translations && `(${this.translations.required[this.language]})`
+			: this.translations && `(${this.translations.optional[this.language]})`;
+	}
+	/**
+	 * Get the HTML for the required/optional flag.
+	 * @returns CSS class for the label/legend.
+	 */
+	getRequiredFlagElement() {
+		return h('span', { class: 'ontario-label__flag' }, this.getRequiredFlagText());
+	}
+	/**
+	 * Get the CSS class for the `label` element.
+	 * @returns CSS class for the `label` element.
+	 */
+	getClass() {
+		return this.captionType === 'large' || this.captionType === 'heading'
+			? this.isLegend
+				? `ontario-fieldset__legend ontario-fieldset__legend--${this.captionType}`
+				: `ontario-label ontario-label--${this.captionType}`
+			: this.isLegend
+				? 'ontario-fieldset__legend'
+				: 'ontario-label';
+	}
+	/**
+	 * Validate caption input by user and output warning message to the console if:
+	 * 1. the `caption` object is not provided
+	 * 2. the `captionText` property of the `caption` object is not provided
+	 * 3. the `captionText` property of the `caption` object is empty or contain only spaces
+	 * 4. the `captionType` property of the `caption` object is not provided
+	 * 5. the `captionType` property of the `caption` object is incorrect
+	 */
+	validateCaption(caption) {
+		var _a;
+		let messageType;
+		// undefined `caption` object
+		if (!caption || Object.keys(caption).length <= 0) {
+			messageType = MessageContentType.UndefinedCaptionObject;
+		} else {
+			// undefined `captionText` property
+			if (!caption.captionText) {
+				messageType = MessageContentType.UndefinedCaptionText;
+			} else {
+				// `captionText` that is empty or contains only spaces
+				if (/^\s*$/.test(caption.captionText)) {
+					messageType = MessageContentType.EmptyCaptionText;
+				}
+			}
+			// undefined `captionType`
+			if (!caption.captionType) {
+				messageType = MessageContentType.UndefinedCaptionType;
+			} else {
+				// incorrect `captionType`
+				if (
+					!CaptionTypes.includes(
+						(_a = caption === null || caption === void 0 ? void 0 : caption.captionType) === null || _a === void 0
+							? void 0
+							: _a.toLowerCase(),
+					)
+				) {
+					messageType = MessageContentType.IncorrectCaptionType;
+				}
+			}
+		}
+		if (messageType) {
+			const message = new ConsoleMessageClass().addDesignSystemTag();
+			if (messageType !== MessageContentType.UndefinedCaptionObject) {
+				message
+					.addMonospaceText(
+						` ${
+							messageType === MessageContentType.EmptyCaptionText ||
+							messageType === MessageContentType.UndefinedCaptionText
+								? 'caption or captionText'
+								: 'captionType'
+						} `,
+					)
+					.addRegularText('object or property of');
+			}
+			message.addMonospaceText(' caption ').addRegularText('object on').addMonospaceText(` ${this.componentTagName} `);
+			this.printConsoleMessage(messageType, message, this.getRequiredFlagText());
+		}
+	}
+	/**
+	 * Generate the content of warning message to be printed to the console
+	 * @param messageType determine the content of warning message to output
+	 * @param componentTagName the tag name of the component that's emitting the warning message
+	 * @param requiredFlagText accepts a string value to be used as the required flag text and defaults to `(optional)` if not set
+	 * @returns an array of `ConsoleMessage` objects containing the message and associated styles to be printed to the console
+	 */
+	printConsoleMessage(messageType, message, requiredFlagText = '(optional)') {
+		switch (messageType) {
+			// undefinedCaptionObject example: caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.
+			// undefinedCaptionText example: captionText property of caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.
+			// EmptyCaptionText example: captionText property of caption object on <ontario-input> is empty or contains only spaces. A blank followed by a (optional) flag is assumed.
+			case MessageContentType.UndefinedCaptionObject:
+			case MessageContentType.UndefinedCaptionText:
+			case MessageContentType.EmptyCaptionText:
+				message
+					.addRegularText(
+						`${
+							messageType === MessageContentType.EmptyCaptionText
+								? 'is empty or contains only spaces'
+								: 'is required but not defined'
+						}. A blank followed by a`,
+					)
+					.addMonospaceText(` ${requiredFlagText} `)
+					.addRegularText('flag is assumed.');
+				break;
+			// UndefinedCaptionType example: captionType property of caption object on <ontario-input> is not defined. The default type is assumed.
+			case MessageContentType.UndefinedCaptionType:
+				message.addRegularText('is not defined. The').addMonospaceText(' default ').addRegularText('type is assumed.');
+				break;
+			// IncorrectCaptionType example: captionType property of caption object on <ontario-input> was set to an incorrect type; only default, heading or large type is allowed. The default type is assumed.
+			case MessageContentType.IncorrectCaptionType:
+				message
+					.addRegularText('was set to an incorrect type; only')
+					.addMonospaceText(' default, heading, ')
+					.addRegularText('or')
+					.addMonospaceText(' large ')
+					.addRegularText('type is allowed. The')
+					.addMonospaceText(' default ')
+					.addRegularText('type is assumed.');
+				break;
+		}
+		message.printMessage();
+	}
+}
+
+var EventType;
+(function (EventType) {
+	EventType['Change'] = 'change';
+	EventType['Blur'] = 'blur';
+	EventType['Focus'] = 'focus';
+	EventType['Input'] = 'input';
+})(EventType || (EventType = {}));
+
+const handleInputEvent = (
+	event,
+	eventType,
+	input,
+	inputChangeEvent,
+	inputFocusEvent,
+	inputBlurEvent,
+	inputInputEvent,
+	type,
+	customChangeFunction,
+	customFocusFunction,
+	customBlurFunction,
+	customInputFunction,
+	hostElement,
+) => {
+	var _a;
+	if (eventType === EventType.Input) {
+		inputInputEvent === null || inputInputEvent === void 0
+			? void 0
+			: inputInputEvent.emit({
+					id: input === null || input === void 0 ? void 0 : input.id,
+					value: (_a = event.data) !== null && _a !== void 0 ? _a : undefined,
+					inputType: event.inputType,
+				});
+		customInputFunction && customInputFunction(event);
+	}
+	if (eventType === EventType.Change) {
+		if (type === 'radio' || type === 'checkbox') {
+			if (input instanceof HTMLInputElement) {
+				inputChangeEvent.emit({
+					checked: input === null || input === void 0 ? void 0 : input.checked,
+					id: input === null || input === void 0 ? void 0 : input.id,
+					value: input === null || input === void 0 ? void 0 : input.value,
+				});
+			}
+		} else {
+			inputChangeEvent.emit({
+				id: input === null || input === void 0 ? void 0 : input.id,
+				value: input === null || input === void 0 ? void 0 : input.value,
+			});
+		}
+		customChangeFunction && customChangeFunction(event);
+		// Note: Change events don't have composable set to true and don't cross the ShadowDOM boundary.
+		// This will emit an event so the normal `onChange` event pattern is maintained.
+		hostElement && emitEvent(hostElement, eventType, event);
+	}
+	if (eventType === EventType.Focus) {
+		inputFocusEvent.emit({
+			id: input === null || input === void 0 ? void 0 : input.id,
+			focused: true,
+			value: input === null || input === void 0 ? void 0 : input.value,
+		});
+		customFocusFunction && customFocusFunction(event);
+	}
+	if (eventType === EventType.Blur) {
+		inputBlurEvent.emit({
+			id: input === null || input === void 0 ? void 0 : input.id,
+			focused: false,
+			value: input === null || input === void 0 ? void 0 : input.value,
+		});
+		customBlurFunction && customBlurFunction(event);
+	}
+};
+/**
+ * Emit a custom event that can be subscribed to by an event listener.
+ *
+ * @param element Component host element, see https://stenciljs.com/docs/host-element
+ * @param name name of the event
+ * @param detail any relevant details, like the original event
+ */
+const emitEvent = (element, name, detail) => {
+	element.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail }));
+};
+
+export { EventType as E, InputCaption as I, emitEvent as e, handleInputEvent as h };
+//# sourceMappingURL=p-CeFeBwzQ.js.map
+
+//# sourceMappingURL=p-CeFeBwzQ.js.map

package/components/p-CeFeBwzQ.js.map

@@ -0,0 +1 @@
+{"file":"p-CeFeBwzQ.js","mappings":"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","names":[],"sources":["src/utils/common/input-caption/input-caption.enum.ts","src/utils/common/input-caption/input-caption.tsx","src/utils/events/event-handler.interface.ts","src/utils/events/event-handler.ts"],"sourcesContent":["export enum MessageContentType {\n\tUndefinedCaptionObject = 'undefinedCaptionObject',\n\tUndefinedCaptionText = 'undefinedCaption',\n\tEmptyCaptionText = 'emptyCaption',\n\tUndefinedCaptionType = 'undefinedCaptionType',\n\tIncorrectCaptionType = 'incorrectCaptionType',\n}\n","import { h } from '@stencil/core';\nimport { CaptionType, CaptionTypes } from './input-caption.types';\nimport { MessageContentType } from './input-caption.enum';\nimport { CaptionInfo, Caption } from './caption.interface';\nimport { ConsoleMessageClass } from '../../console-message/console-message';\n\nexport class InputCaption implements CaptionInfo {\n\t/**\n\t * The text to display as caption.\n\t */\n\tcaptionText: string;\n\n\t/**\n\t * The type of caption to render.\n\t */\n\tcaptionType?: CaptionType = 'default';\n\n\t/**\n\t * Determine whether the input field is required.\n\t */\n\trequired?: boolean = false;\n\n\t/**\n\t * Determine whether the rendered element is a `<label>` or `<legend>`.\n\t */\n\tisLegend?: boolean = false;\n\n\t/**\n\t * Name of the component instantiating the class.\n\t * This is used for validation warning message.\n\t */\n\tcomponentTagName: string;\n\n\tlanguage: any = 'en';\n\n\ttranslations: any;\n\n\t/**\n\t * Set the class members\n\t * Output a console warning message if the provided `label` type is incorrect\n\t * @param caption object containing the essential data to configure the input label\n\t */\n\tconstructor(\n\t\tcomponentTagName: string,\n\t\tcaption: Caption | string,\n\t\ttranslations: any,\n\t\tlanguage: any,\n\t\tisLegend: boolean = false,\n\t\trequired: boolean = false,\n\t) {\n\t\tlet captionObject: Caption;\n\n\t\tif (typeof caption === 'string') {\n\t\t\ttry {\n\t\t\t\tcaptionObject = JSON.parse(caption) as Caption;\n\t\t\t} catch {\n\t\t\t\tcaptionObject = { captionText: caption, captionType: 'default' };\n\t\t\t}\n\t\t} else {\n\t\t\tcaptionObject = caption;\n\t\t}\n\n\t\tthis.componentTagName = componentTagName.toLocaleLowerCase();\n\t\tthis.captionText = captionObject?.captionText;\n\t\tthis.captionType =\n\t\t\t(captionObject?.captionType && CaptionTypes.find((type) => type === captionObject.captionType?.toLowerCase())) ||\n\t\t\t'default';\n\t\tthis.required = required;\n\t\tthis.isLegend = isLegend;\n\t\tthis.translations = translations;\n\t\tthis.language = language;\n\n\t\tthis.validateCaption(this);\n\t}\n\n\t/**\n\t * Return the `<label>` element for text inputs\n\t * @param captionFor Set the `htmlFor` attribute\n\t * @param hasHintExpander Indicate whether the component the label is for has a hint expander or not\n\t * @param disableRequiredFlag Disable the required/optional label text _(only use in highly special cases)_\n\t * @returns element containing the caption for the input\n\t */\n\tgetCaption = (\n\t\tcaptionFor?: string | undefined,\n\t\thasHintExpander: boolean = false,\n\t\tdisableRequiredFlag: boolean = false,\n\t): HTMLElement => {\n\t\tconst captionText = this.captionText && this.captionText.toLowerCase();\n\t\tconst captionContent = this.isLegend ? (\n\t\t\t<legend class={this.getClass()}>\n\t\t\t\t{this.captionType === 'heading' ? <h1>{this.captionText}</h1> : this.captionText}\n\t\t\t\t{!disableRequiredFlag && this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</legend>\n\t\t) : (\n\t\t\t<label htmlFor={captionFor} class={this.getClass()}>\n\t\t\t\t{this.captionText}\n\t\t\t\t{!disableRequiredFlag && this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</label>\n\t\t);\n\n\t\t// with `this.captionType` already set to one of the enum values, the comparison no longer needs the `toLowerCase()` transform\n\t\treturn this.captionType === 'heading' && !this.isLegend ? <h1>{captionContent}</h1> : captionContent;\n\t};\n\n\tgetHintExpanderAccessibilityText(captionText: string, hasHintExpanderOnOption: boolean = false): HTMLElement {\n\t\tconst multipleOptionsMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.checkboxHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\n\t\tconst singleOptionMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.singleHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\t\treturn this.componentTagName === 'ontario-checkboxes'\n\t\t\t? !hasHintExpanderOnOption\n\t\t\t\t? multipleOptionsMessage\n\t\t\t\t: singleOptionMessage\n\t\t\t: singleOptionMessage;\n\t}\n\n\t/**\n\t * Determines which flag text to use between `required` and `optional`\n\t * @returns `required` or `optional` flag text\n\t */\n\tprivate getRequiredFlagText(): string {\n\t\treturn this.required\n\t\t\t? this.translations && `(${this.translations.required[this.language]})`\n\t\t\t: this.translations && `(${this.translations.optional[this.language]})`;\n\t}\n\n\t/**\n\t * Get the HTML for the required/optional flag.\n\t * @returns CSS class for the label/legend.\n\t */\n\tprivate getRequiredFlagElement(): HTMLElement {\n\t\treturn <span class=\"ontario-label__flag\">{this.getRequiredFlagText()}</span>;\n\t}\n\n\t/**\n\t * Get the CSS class for the `label` element.\n\t * @returns CSS class for the `label` element.\n\t */\n\tprivate getClass(): string {\n\t\treturn this.captionType === 'large' || this.captionType === 'heading'\n\t\t\t? this.isLegend\n\t\t\t\t? `ontario-fieldset__legend ontario-fieldset__legend--${this.captionType}`\n\t\t\t\t: `ontario-label ontario-label--${this.captionType}`\n\t\t\t: this.isLegend\n\t\t\t\t? 'ontario-fieldset__legend'\n\t\t\t\t: 'ontario-label';\n\t}\n\n\t/**\n\t * Validate caption input by user and output warning message to the console if:\n\t * 1. the `caption` object is not provided\n\t * 2. the `captionText` property of the `caption` object is not provided\n\t * 3. the `captionText` property of the `caption` object is empty or contain only spaces\n\t * 4. the `captionType` property of the `caption` object is not provided\n\t * 5. the `captionType` property of the `caption` object is incorrect\n\t */\n\tprivate validateCaption(caption?: InputCaption) {\n\t\tlet messageType;\n\n\t\t// undefined `caption` object\n\t\tif (!caption || Object.keys(caption).length <= 0) {\n\t\t\tmessageType = MessageContentType.UndefinedCaptionObject;\n\t\t} else {\n\t\t\t// undefined `captionText` property\n\t\t\tif (!caption.captionText) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionText;\n\t\t\t} else {\n\t\t\t\t// `captionText` that is empty or contains only spaces\n\t\t\t\tif (/^\\s*$/.test(caption.captionText)) {\n\t\t\t\t\tmessageType = MessageContentType.EmptyCaptionText;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// undefined `captionType`\n\t\t\tif (!caption.captionType) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionType;\n\t\t\t} else {\n\t\t\t\t// incorrect `captionType`\n\t\t\t\tif (!CaptionTypes.includes(caption?.captionType?.toLowerCase() as CaptionType)) {\n\t\t\t\t\tmessageType = MessageContentType.IncorrectCaptionType;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (messageType) {\n\t\t\tconst message = new ConsoleMessageClass().addDesignSystemTag();\n\n\t\t\tif (messageType !== MessageContentType.UndefinedCaptionObject) {\n\t\t\t\tmessage\n\t\t\t\t\t.addMonospaceText(\n\t\t\t\t\t\t` ${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText ||\n\t\t\t\t\t\t\tmessageType === MessageContentType.UndefinedCaptionText\n\t\t\t\t\t\t\t\t? 'caption or captionText'\n\t\t\t\t\t\t\t\t: 'captionType'\n\t\t\t\t\t\t} `,\n\t\t\t\t\t)\n\t\t\t\t\t.addRegularText('object or property of');\n\t\t\t}\n\n\t\t\tmessage.addMonospaceText(' caption ').addRegularText('object on').addMonospaceText(` ${this.componentTagName} `);\n\t\t\tthis.printConsoleMessage(messageType, message, this.getRequiredFlagText());\n\t\t}\n\t}\n\n\t/**\n\t * Generate the content of warning message to be printed to the console\n\t * @param messageType determine the content of warning message to output\n\t * @param componentTagName the tag name of the component that's emitting the warning message\n\t * @param requiredFlagText accepts a string value to be used as the required flag text and defaults to `(optional)` if not set\n\t * @returns an array of `ConsoleMessage` objects containing the message and associated styles to be printed to the console\n\t */\n\tprivate printConsoleMessage(\n\t\tmessageType: MessageContentType,\n\t\tmessage: ConsoleMessageClass,\n\t\trequiredFlagText: string = '(optional)',\n\t) {\n\t\tswitch (messageType) {\n\t\t\t// undefinedCaptionObject example: caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// undefinedCaptionText example: captionText property of caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// EmptyCaptionText example: captionText property of caption object on <ontario-input> is empty or contains only spaces. A blank followed by a (optional) flag is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionObject:\n\t\t\tcase MessageContentType.UndefinedCaptionText:\n\t\t\tcase MessageContentType.EmptyCaptionText:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t`${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText\n\t\t\t\t\t\t\t\t? 'is empty or contains only spaces'\n\t\t\t\t\t\t\t\t: 'is required but not defined'\n\t\t\t\t\t\t}. A blank followed by a`,\n\t\t\t\t\t)\n\t\t\t\t\t.addMonospaceText(` ${requiredFlagText} `)\n\t\t\t\t\t.addRegularText('flag is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// UndefinedCaptionType example: captionType property of caption object on <ontario-input> is not defined. The default type is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionType:\n\t\t\t\tmessage.addRegularText('is not defined. The').addMonospaceText(' default ').addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// IncorrectCaptionType example: captionType property of caption object on <ontario-input> was set to an incorrect type; only default, heading or large type is allowed. The default type is assumed.\n\t\t\tcase MessageContentType.IncorrectCaptionType:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText('was set to an incorrect type; only')\n\t\t\t\t\t.addMonospaceText(' default, heading, ')\n\t\t\t\t\t.addRegularText('or')\n\t\t\t\t\t.addMonospaceText(' large ')\n\t\t\t\t\t.addRegularText('type is allowed. The')\n\t\t\t\t\t.addMonospaceText(' default ')\n\t\t\t\t\t.addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\t\t}\n\n\t\tmessage.printMessage();\n\t}\n}\n","export enum EventType {\n\tChange = 'change',\n\tBlur = 'blur',\n\tFocus = 'focus',\n\tInput = 'input',\n}\n\nexport type InputInteractionEvent = {\n\tid?: string;\n\tvalue?: string;\n};\n\nexport type InputInputEvent = InputInteractionEvent & {\n\tinputType?: string;\n};\n\nexport type RadioAndCheckboxChangeEvent = InputInteractionEvent & {\n\tchecked: boolean;\n};\n\nexport type InputFocusBlurEvent = InputInteractionEvent & {\n\tfocused: boolean;\n};\n\nexport type InputType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;\n","import { EventEmitter } from '@stencil/core';\nimport {\n\tInputType,\n\tEventType,\n\tInputFocusBlurEvent,\n\tInputInteractionEvent,\n\tRadioAndCheckboxChangeEvent,\n\tInputInputEvent,\n} from './event-handler.interface';\n\nexport const handleInputEvent = (\n\tevent: Event,\n\teventType: EventType,\n\tinput: InputType,\n\tinputChangeEvent: EventEmitter<InputInteractionEvent | RadioAndCheckboxChangeEvent>,\n\tinputFocusEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputBlurEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputInputEvent?: EventEmitter<InputInputEvent>,\n\ttype?: string,\n\tcustomChangeFunction?: (event: Event) => void,\n\tcustomFocusFunction?: (event: Event) => void,\n\tcustomBlurFunction?: (event: Event) => void,\n\tcustomInputFunction?: (event: Event) => void,\n\thostElement?: HTMLElement,\n) => {\n\tif (eventType === EventType.Input) {\n\t\tinputInputEvent?.emit({\n\t\t\tid: input?.id,\n\t\t\tvalue: (event as InputEvent).data ?? undefined,\n\t\t\tinputType: (event as InputEvent).inputType,\n\t\t});\n\n\t\tcustomInputFunction && customInputFunction(event);\n\t}\n\n\tif (eventType === EventType.Change) {\n\t\tif (type === 'radio' || type === 'checkbox') {\n\t\t\tif (input instanceof HTMLInputElement) {\n\t\t\t\tinputChangeEvent.emit({\n\t\t\t\t\tchecked: input?.checked,\n\t\t\t\t\tid: input?.id,\n\t\t\t\t\tvalue: input?.value,\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tinputChangeEvent.emit({\n\t\t\t\tid: input?.id,\n\t\t\t\tvalue: input?.value,\n\t\t\t});\n\t\t}\n\n\t\tcustomChangeFunction && customChangeFunction(event);\n\n\t\t// Note: Change events don't have composable set to true and don't cross the ShadowDOM boundary.\n\t\t// This will emit an event so the normal `onChange` event pattern is maintained.\n\t\thostElement && emitEvent(hostElement, eventType, event);\n\t}\n\n\tif (eventType === EventType.Focus) {\n\t\tinputFocusEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: true,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomFocusFunction && customFocusFunction(event);\n\t}\n\n\tif (eventType === EventType.Blur) {\n\t\tinputBlurEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: false,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomBlurFunction && customBlurFunction(event);\n\t}\n};\n\n/**\n * Emit a custom event that can be subscribed to by an event listener.\n *\n * @param element Component host element, see https://stenciljs.com/docs/host-element\n * @param name name of the event\n * @param detail any relevant details, like the original event\n */\nexport const emitEvent = (element: HTMLElement, name: string, detail?: any) => {\n\telement.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail }));\n};\n"],"version":3}

package/components/p-DGFFJaKo.js

@@ -0,0 +1,168 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { I as IconColours, v as validateColor } from './p-BOcd5PoR.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+
+const ontarioIconCss =
+	'.ontario-icon svg,.ontario-icon{display:inline-block;stroke-width:0;stroke:currentColor;fill:currentColor;vertical-align:middle;overflow:hidden}.ontario-icon--blue svg{stroke:#0066CC;fill:#0066CC}.ontario-icon--grey svg{stroke:#666666;fill:#666666}.ontario-icon--black svg{stroke:#1A1A1A;fill:#1A1A1A}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}.ontario-icon--white svg{stroke:#FFFFFF;fill:#FFFFFF}';
+
+const OntarioIconChevronLeft = /*@__PURE__*/ proxyCustomElement(
+	class OntarioIconChevronLeft extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * The icon width will autogenerate the height since the icons are in square format, thus preserving
+			 * the aspect ratio.
+			 */
+			this.iconWidth = 24;
+			/**
+			 * Set the icon's colour.
+			 */
+			this.colour = 'black';
+		}
+		/**
+		 * Watch for changes in the `iconWidth` variable for validation purpose.
+		 * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).
+		 */
+		validateWidth() {
+			if (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' icon-width ')
+					.addRegularText('on')
+					.addMonospaceText(' <ontario-icon-chevron-left> ')
+					.addRegularText(
+						`${isNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default size of`,
+					)
+					.addMonospaceText(' 24px ')
+					.addRegularText('was assumed.')
+					.printMessage();
+				this.iconWidthState = 24;
+			} else {
+				this.iconWidthState = this.iconWidth;
+			}
+		}
+		/**
+		 * Watch for changes in the `colour` variable for validation purpose.
+		 * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).
+		 * If a match is found in one of the enum values then `colour` will be set to the matching enum value.
+		 */
+		validateColour() {
+			const isValid = validateValueAgainstArray(this.colour, IconColours);
+			if (isValid) {
+				this.iconColourState = this.colour;
+			} else {
+				if (validateColor(this.colour)) {
+					this.iconCustomColourState = this.colour;
+				} else {
+					this.iconColourState = this.warnDefaultColour();
+				}
+			}
+		}
+		/**
+		 * Print the invalid colour warning message
+		 * @returns default colour (black)
+		 */
+		warnDefaultColour() {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' colour ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-icon-chevron-left> ')
+				.addRegularText('was set to an invalid colour; only')
+				.addMonospaceText(' black, blue, grey or white ')
+				.addRegularText('are supported. The default colour')
+				.addMonospaceText(' black ')
+				.addRegularText('is assumed.')
+				.printMessage();
+			return 'black';
+		}
+		/**
+		 * Stencil component lifecycle method that is called once after the component is first connected to the DOM.
+		 */
+		componentWillLoad() {
+			this.validateColour();
+			this.validateWidth();
+		}
+		/**
+		 * Returns the HTML code to be rendered into a custom element.
+		 */
+		render() {
+			return h(
+				'div',
+				{
+					key: '310fd94c7bb028afff4bb101b1ad8b426e3cd48e',
+					class: `ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`,
+					style: { width: `${this.iconWidthState}px` },
+				},
+				h(
+					'svg',
+					{
+						key: '81539bdd5704c110e54f89a9a32fd51f26190df2',
+						class: 'svg-icon',
+						style: { fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` },
+						role: 'img',
+						xmlns: 'http://www.w3.org/2000/svg',
+						fill: 'none',
+						viewBox: '0 0 24 24',
+						id: 'chevron-left',
+					},
+					h('path', {
+						key: 'c9d665121c880070ef38225343b20f24fd75e239',
+						d: 'M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.58-4.6 4.58-4.6z',
+					}),
+				),
+			);
+		}
+		static get watchers() {
+			return {
+				iconWidth: ['validateWidth'],
+				colour: ['validateColour'],
+			};
+		}
+		static get style() {
+			return ontarioIconCss;
+		}
+	},
+	[
+		257,
+		'ontario-icon-chevron-left',
+		{
+			iconWidth: [2, 'icon-width'],
+			colour: [1],
+			iconWidthState: [32],
+			iconColourState: [32],
+			iconCustomColourState: [32],
+		},
+		undefined,
+		{
+			iconWidth: ['validateWidth'],
+			colour: ['validateColour'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-icon-chevron-left'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-icon-chevron-left':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioIconChevronLeft);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioIconChevronLeft as O, defineCustomElement as d };
+//# sourceMappingURL=p-DGFFJaKo.js.map
+
+//# sourceMappingURL=p-DGFFJaKo.js.map

package/components/p-DGFFJaKo.js.map

@@ -0,0 +1 @@
+{"file":"p-DGFFJaKo.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-left&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-left.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-chevron-left',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronLeft implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-chevron-left> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-chevron-left> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"chevron-left\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.58-4.6 4.58-4.6z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n"],"version":3}