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

package/dist/collection/components/ontario-task-list/ontario-task-list.js

@@ -0,0 +1,263 @@
+import { h } from '@stencil/core';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import { validateLanguage } from '../../utils/validation/validation-functions';
+import translations from '../../translations/global.i18n.json';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { TaskStatuses } from '../../utils/common/task-statuses.enum';
+export class OntarioTaskList {
+	el;
+	/**
+	 * The label prop used for the task list heading.
+	 */
+	label;
+	/**
+	 * Allows consumers to define the heading level for the task list component.
+	 *
+	 * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.
+	 */
+	headingLevel = 'h2';
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.
+	 */
+	language = 'en';
+	/**
+	 * State to track the number of completed tasks.
+	 */
+	completedTasks = 0;
+	/**
+	 * State to track the total number of tasks.
+	 */
+	totalTasks = 0;
+	/**
+	 * Class-level constant for task count delay in milliseconds.
+	 *
+	 * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered
+	 * in the DOM before the `countTasks` method is executed. Without this delay, the component
+	 * might attempt to query or count tasks before they are properly initialized, leading to
+	 * inaccurate task counts.
+	 */
+	static TASK_COUNT_DELAY_MS = 50;
+	/**
+	 * Watch for changes in `headingLevel` prop to validate its value.
+	 */
+	validateHeadingLevel(newValue) {
+		const allowedValues = ['h1', 'h2', 'h3', 'h4', 'h5'];
+		// Validate the new value against the allowed values
+		const isValid = validateValueAgainstArray(newValue, allowedValues);
+		if (!isValid) {
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' headingLevel ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-task-list> ')
+				.addRegularText('was set to an invalid value; only ')
+				.addMonospaceText(allowedValues.join(', '))
+				.addRegularText(' are supported. The default value ')
+				.addMonospaceText('h2')
+				.addRegularText(' is assumed.')
+				.printMessage();
+			this.headingLevel = 'h2';
+		}
+	}
+	/**
+	 * Counts the total tasks and completed tasks by querying for `ontario-task` elements.
+	 */
+	countTasks() {
+		const slot = this.el.shadowRoot?.querySelector('slot');
+		const tasks = slot ? slot.assignedElements().filter((el) => el.tagName.toLowerCase() === 'ontario-task') : [];
+		this.totalTasks = tasks.length;
+		this.completedTasks = tasks.filter((task) => {
+			// Get the status directly from the light DOM
+			const status = task.getAttribute('data-task-status');
+			return status === TaskStatuses.Completed;
+		}).length;
+	}
+	/**
+	 * Lifecycle method: before the component loads, validate heading level.
+	 */
+	async componentWillLoad() {
+		this.validateHeadingLevel(this.headingLevel);
+	}
+	/**
+	 * Ensure tasks are counted after custom elements are fully upgraded.
+	 */
+	connectedCallback() {
+		// Wait for the custom element to be fully defined before counting
+		customElements.whenDefined('ontario-task').then(() => {
+			setTimeout(() => {
+				this.countTasks();
+			}, OntarioTaskList.TASK_COUNT_DELAY_MS);
+		});
+	}
+	/**
+	 * Use slotchange and MutationObserver to track changes in slot content.
+	 */
+	componentDidLoad() {
+		const slot = this.el.shadowRoot?.querySelector('slot');
+		if (slot) {
+			slot.addEventListener('slotchange', () => {
+				this.countTasks();
+			});
+		}
+		// Observe changes to the light DOM for accurate counting
+		const observer = new MutationObserver((_mutations) => {
+			this.countTasks();
+		});
+		observer.observe(this.el, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ['data-task-status'],
+		});
+	}
+	componentDidRender() {
+		setTimeout(() => {
+			this.countTasks();
+		}, OntarioTaskList.TASK_COUNT_DELAY_MS);
+	}
+	render() {
+		// Resolve the language to ensure valid translations are used.
+		const resolvedLanguage = validateLanguage(this.language);
+		const headingProps = {
+			class: { 'ontario-task-list__heading': true },
+		};
+		return h(
+			'div',
+			{ key: 'fb26534c596025f0bbbf729d923210760e31ff60', class: 'ontario-task-list__container' },
+			h(this.headingLevel, headingProps, this.label),
+			h(
+				'p',
+				{
+					'key': '8344876cd43f5b4c06685a41d0f49a55817cb1ee',
+					'class': 'ontario-task-list__completion-text',
+					'aria-live': 'polite',
+				},
+				translations.taskGroup.completed[resolvedLanguage],
+				'\u00A0',
+				this.completedTasks,
+				'\u00A0',
+				translations.taskGroup.outOf[resolvedLanguage],
+				'\u00A0',
+				this.totalTasks,
+				'\u00A0',
+				translations.taskGroup.tasks[resolvedLanguage],
+			),
+			h(
+				'ul',
+				{ key: '42962ee4027bf4df1309ef409106e040f98c5fd2', class: 'ontario-task-list', role: 'list' },
+				h('slot', { key: 'd226bd26241b20557f13a0acdb161ae474c915e1' }),
+			),
+		);
+	}
+	static get is() {
+		return 'ontario-task-list';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-task-list.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-task-list.css'],
+		};
+	}
+	static get properties() {
+		return {
+			label: {
+				type: 'string',
+				attribute: 'label',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The label prop used for the task list heading.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+			},
+			headingLevel: {
+				type: 'string',
+				attribute: 'heading-level',
+				mutable: false,
+				complexType: {
+					original: 'TaskListHeadingLevel',
+					resolved: '"h1" | "h2" | "h3" | "h4" | "h5"',
+					references: {
+						TaskListHeadingLevel: {
+							location: 'local',
+							path: '/home/runner/work/ontario-design-system/ontario-design-system/packages/ontario-design-system-component-library/src/components/ontario-task-list/ontario-task-list.tsx',
+							id: 'src/components/ontario-task-list/ontario-task-list.tsx::TaskListHeadingLevel',
+						},
+					},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: "Allows consumers to define the heading level for the task list component.\n\nAccepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.",
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'h2'",
+			},
+			language: {
+				type: 'string',
+				attribute: 'language',
+				mutable: true,
+				complexType: {
+					original: 'Language',
+					resolved: '"en" | "fr" | undefined',
+					references: {
+						Language: {
+							location: 'import',
+							path: '../../utils/common/language-types',
+							id: 'src/utils/common/language-types.ts::Language',
+						},
+					},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'The language of the component.\nThis is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.',
+				},
+				getter: false,
+				setter: false,
+				reflect: false,
+				defaultValue: "'en'",
+			},
+		};
+	}
+	static get states() {
+		return {
+			completedTasks: {},
+			totalTasks: {},
+		};
+	}
+	static get elementRef() {
+		return 'el';
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'headingLevel',
+				methodName: 'validateHeadingLevel',
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-task-list.js.map

package/dist/collection/components/ontario-task-list/ontario-task-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-task-list.js","sourceRoot":"","sources":["../../../src/components/ontario-task-list/ontario-task-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE1E,OAAO,EAAE,mBAAmB,EAAE,MAAM,6CAA6C,CAAC;AAClF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAC/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D,OAAO,EAAE,yBAAyB,EAAE,MAAM,6CAA6C,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,uCAAuC,CAAC;AAQrE,MAAM,OAAO,eAAe;IAChB,EAAE,CAAc;IAE3B;;OAEG;IACK,KAAK,CAAS;IAEtB;;;;OAIG;IACK,YAAY,GAAyB,IAAI,CAAC;IAElD;;;OAGG;IACsB,QAAQ,GAAc,IAAI,CAAC;IAEpD;;OAEG;IACM,cAAc,GAAW,CAAC,CAAC;IAEpC;;OAEG;IACM,UAAU,GAAW,CAAC,CAAC;IAEhC;;;;;;;OAOG;IACK,MAAM,CAAU,mBAAmB,GAAG,EAAE,CAAC;IAEjD;;OAEG;IAEH,oBAAoB,CAAC,QAAgB;QACpC,MAAM,aAAa,GAA2B,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;QAE7E,oDAAoD;QACpD,MAAM,OAAO,GAAG,yBAAyB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC;QAEnE,IAAI,CAAC,OAAO,EAAE,CAAC;YACd,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,gBAAgB,CAAC;iBAClC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,uBAAuB,CAAC;iBACzC,cAAc,CAAC,oCAAoC,CAAC;iBACpD,gBAAgB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;iBAC1C,cAAc,CAAC,oCAAoC,CAAC;iBACpD,gBAAgB,CAAC,IAAI,CAAC;iBACtB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YAEjB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC1B,CAAC;IACF,CAAC;IAED;;OAEG;IACH,UAAU;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,MAAM,KAAK,GAAG,IAAI;YACjB,CAAC,CAAE,IAAI,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,cAAc,CAAmB;YACxG,CAAC,CAAC,EAAE,CAAC;QAEN,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;QAE/B,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3C,6CAA6C;YAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC;YACrD,OAAO,MAAM,KAAK,YAAY,CAAC,SAAS,CAAC;QAC1C,CAAC,CAAC,CAAC,MAAM,CAAC;IACX,CAAC;IAED;;OAEG;IACH,KAAK,CAAC,iBAAiB;QACtB,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC9C,CAAC;IAED;;OAEG;IACH,iBAAiB;QAChB,kEAAkE;QAClE,cAAc,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YACpD,UAAU,CAAC,GAAG,EAAE;gBACf,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;QACzC,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,gBAAgB;QACf,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACvD,IAAI,IAAI,EAAE,CAAC;YACV,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;gBACxC,IAAI,CAAC,UAAU,EAAE,CAAC;YACnB,CAAC,CAAC,CAAC;QACJ,CAAC;QAED,yDAAyD;QACzD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,UAAU,EAAE,EAAE;YACpD,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE;YACzB,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,kBAAkB,CAAC;SACrC,CAAC,CAAC;IACJ,CAAC;IAED,kBAAkB;QACjB,UAAU,CAAC,GAAG,EAAE;YACf,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACL,8DAA8D;QAC9D,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEzD,MAAM,YAAY,GAAG;YACpB,KAAK,EAAE,EAAE,4BAA4B,EAAE,IAAI,EAAE;SAC7C,CAAC;QAEF,OAAO,CACN,4DAAK,KAAK,EAAC,8BAA8B;YACvC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC;YAE/C,0DAAG,KAAK,EAAC,oCAAoC,eAAW,QAAQ;gBAC9D,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,gBAAgB,CAAC;;gBAClD,IAAI,CAAC,cAAc;;gBACnB,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC;;gBAC9C,IAAI,CAAC,UAAU;;gBACf,YAAY,CAAC,SAAS,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAC5C;YAEJ,2DAAI,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM;gBACxC,8DAAa,CACT,CACA,CACN,CAAC;IACH,CAAC","sourcesContent":["import { h, Component, Element, Prop, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { TaskStatuses } from '../../utils/common/task-statuses.enum';\nexport type TaskListHeadingLevel = 'h1' | Exclude<HeadingLevel, 'h6'>;\n\n@Component({\n\ttag: 'ontario-task-list',\n\tstyleUrl: 'ontario-task-list.scss',\n\tshadow: true,\n})\nexport class OntarioTaskList {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The label prop used for the task list heading.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Allows consumers to define the heading level for the task list component.\n\t *\n\t * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.\n\t */\n\t@Prop() headingLevel: TaskListHeadingLevel = 'h2';\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * State to track the number of completed tasks.\n\t */\n\t@State() completedTasks: number = 0;\n\n\t/**\n\t * State to track the total number of tasks.\n\t */\n\t@State() totalTasks: number = 0;\n\n\t/**\n\t * Class-level constant for task count delay in milliseconds.\n\t *\n\t * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered\n\t * in the DOM before the `countTasks` method is executed. Without this delay, the component\n\t * might attempt to query or count tasks before they are properly initialized, leading to\n\t * inaccurate task counts.\n\t */\n\tprivate static readonly TASK_COUNT_DELAY_MS = 50;\n\n\t/**\n\t * Watch for changes in `headingLevel` prop to validate its value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskListHeadingLevel[] = ['h1', 'h2', 'h3', 'h4', 'h5'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task-list> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h2')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h2';\n\t\t}\n\t}\n\n\t/**\n\t * Counts the total tasks and completed tasks by querying for `ontario-task` elements.\n\t */\n\tcountTasks() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tconst tasks = slot\n\t\t\t? (slot.assignedElements().filter((el) => el.tagName.toLowerCase() === 'ontario-task') as HTMLElement[])\n\t\t\t: [];\n\n\t\tthis.totalTasks = tasks.length;\n\n\t\tthis.completedTasks = tasks.filter((task) => {\n\t\t\t// Get the status directly from the light DOM\n\t\t\tconst status = task.getAttribute('data-task-status');\n\t\t\treturn status === TaskStatuses.Completed;\n\t\t}).length;\n\t}\n\n\t/**\n\t * Lifecycle method: before the component loads, validate heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\t/**\n\t * Ensure tasks are counted after custom elements are fully upgraded.\n\t */\n\tconnectedCallback() {\n\t\t// Wait for the custom element to be fully defined before counting\n\t\tcustomElements.whenDefined('ontario-task').then(() => {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.countTasks();\n\t\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t\t});\n\t}\n\n\t/**\n\t * Use slotchange and MutationObserver to track changes in slot content.\n\t */\n\tcomponentDidLoad() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tif (slot) {\n\t\t\tslot.addEventListener('slotchange', () => {\n\t\t\t\tthis.countTasks();\n\t\t\t});\n\t\t}\n\n\t\t// Observe changes to the light DOM for accurate counting\n\t\tconst observer = new MutationObserver((_mutations) => {\n\t\t\tthis.countTasks();\n\t\t});\n\t\tobserver.observe(this.el, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-task-status'],\n\t\t});\n\t}\n\n\tcomponentDidRender() {\n\t\tsetTimeout(() => {\n\t\t\tthis.countTasks();\n\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t}\n\n\trender() {\n\t\t// Resolve the language to ensure valid translations are used.\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\n\t\tconst headingProps = {\n\t\t\tclass: { 'ontario-task-list__heading': true },\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task-list__container\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\n\t\t\t\t<p class=\"ontario-task-list__completion-text\" aria-live=\"polite\">\n\t\t\t\t\t{translations.taskGroup.completed[resolvedLanguage]}&nbsp;\n\t\t\t\t\t{this.completedTasks}&nbsp;\n\t\t\t\t\t{translations.taskGroup.outOf[resolvedLanguage]}&nbsp;\n\t\t\t\t\t{this.totalTasks}&nbsp;\n\t\t\t\t\t{translations.taskGroup.tasks[resolvedLanguage]}\n\t\t\t\t</p>\n\n\t\t\t\t<ul class=\"ontario-task-list\" role=\"list\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-textarea/ontario-textarea.css

@@ -82,7 +82,7 @@ h1,
 	text-rendering: optimizeLegibility;
 	margin-bottom: 1rem;
 	font-feature-settings: normal;
-	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 h1 > .ontario-label--heading,
@@ -447,7 +447,7 @@ p + ol {
 
 .ontario-fieldset__legend {
 	color: #1a1a1a;
-	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 1.1875rem;
 	font-weight: 700;
 	margin: 0 0 1rem 0;
@@ -512,7 +512,7 @@ p + ol {
 .ontario-label {
 	cursor: pointer;
 	color: #1a1a1a;
-	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-family: 'Raleway Modified', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 	font-size: 1.1875rem;
 	font-weight: 700;
 	line-height: 1.5;

package/dist/collection/components/ontario-textarea/ontario-textarea.js

@@ -261,20 +261,20 @@ export class OntarioTextarea {
 		return h(
 			'div',
 			{
-				key: 'f4c99e0155073f0a5272fe21216ef3c6a48093ee',
+				key: '0e8456b0840ae71541d3b201df095680d63650db',
 				class: `ontario-form-group ${error ? 'ontario-textarea--error' : ''}`,
 			},
 			this.captionState.getCaption(this.getId(), !!this.internalHintExpander),
 			this.internalHintText &&
 				h('ontario-hint-text', {
-					key: 'b560947eb40087f95e09367c6aacb08e33e51a4a',
+					key: '21c33eb1f306b8280dcfa1d0def3b3d6aa0baf4b',
 					hint: this.internalHintText.hint,
 					hintContentType: this.internalHintText.hintContentType,
 					ref: (el) => (this.hintTextRef = el),
 				}),
-			h(ErrorMessage, { key: 'caf24478560b50925dc47aa20604dc36461394aa', message: this.errorMessage, error: error }),
+			h(ErrorMessage, { key: 'd908a60fc99c09936564cb8d1f6652d2476f6e70', message: this.errorMessage, error: error }),
 			h('textarea', {
-				'key': '63ca361d023d55b91933bc6a229d038468a1f0ec',
+				'key': '51d90ea63daf55f8c20b563551a7e20a5ece16f2',
 				'aria-describedby': this.hintTextId,
 				'class': this.getClass(),
 				'id': this.getId(),
@@ -288,7 +288,7 @@ export class OntarioTextarea {
 			}),
 			this.internalHintExpander &&
 				h('ontario-hint-expander', {
-					'key': 'dcac37a52925f69a3e936877646139de6c7a811c',
+					'key': 'db0a618f1c0296dd1a6dcd014153b00925371d97',
 					'hint': this.internalHintExpander.hint,
 					'content': this.internalHintExpander.content,
 					'hintContentType': this.internalHintExpander.hintContentType,
@@ -319,6 +319,7 @@ export class OntarioTextarea {
 		return {
 			caption: {
 				type: 'string',
+				attribute: 'caption',
 				mutable: false,
 				complexType: {
 					original: 'Caption | string',
@@ -344,11 +345,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'caption',
 				reflect: false,
 			},
 			name: {
 				type: 'string',
+				attribute: 'name',
 				mutable: false,
 				complexType: {
 					original: 'string',
@@ -363,11 +364,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'name',
 				reflect: false,
 			},
 			elementId: {
 				type: 'string',
+				attribute: 'element-id',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -382,11 +383,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'element-id',
 				reflect: false,
 			},
 			required: {
 				type: 'boolean',
+				attribute: 'required',
 				mutable: false,
 				complexType: {
 					original: 'boolean',
@@ -401,12 +402,12 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'required',
 				reflect: false,
 				defaultValue: 'false',
 			},
 			value: {
 				type: 'string',
+				attribute: 'value',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -421,11 +422,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'value',
 				reflect: false,
 			},
 			hintText: {
 				type: 'string',
+				attribute: 'hint-text',
 				mutable: false,
 				complexType: {
 					original: 'string | Hint',
@@ -446,11 +447,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'hint-text',
 				reflect: false,
 			},
 			hintExpander: {
 				type: 'string',
+				attribute: 'hint-expander',
 				mutable: false,
 				complexType: {
 					original: 'HintExpander | string',
@@ -476,11 +477,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'hint-expander',
 				reflect: false,
 			},
 			language: {
 				type: 'string',
+				attribute: 'language',
 				mutable: true,
 				complexType: {
 					original: 'Language',
@@ -501,11 +502,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'language',
 				reflect: false,
 			},
 			errorMessage: {
 				type: 'string',
+				attribute: 'error-message',
 				mutable: true,
 				complexType: {
 					original: 'string',
@@ -520,11 +521,11 @@ export class OntarioTextarea {
 				},
 				getter: false,
 				setter: false,
-				attribute: 'error-message',
 				reflect: false,
 			},
 			customOnInput: {
 				type: 'unknown',
+				attribute: 'custom-on-input',
 				mutable: false,
 				complexType: {
 					original: '(event: globalThis.Event) => void',
@@ -547,6 +548,7 @@ export class OntarioTextarea {
 			},
 			customOnChange: {
 				type: 'unknown',
+				attribute: 'custom-on-change',
 				mutable: false,
 				complexType: {
 					original: '(event: globalThis.Event) => void',
@@ -569,6 +571,7 @@ export class OntarioTextarea {
 			},
 			customOnBlur: {
 				type: 'unknown',
+				attribute: 'custom-on-blur',
 				mutable: false,
 				complexType: {
 					original: '(event: globalThis.Event) => void',
@@ -591,6 +594,7 @@ export class OntarioTextarea {
 			},
 			customOnFocus: {
 				type: 'unknown',
+				attribute: 'custom-on-focus',
 				mutable: false,
 				complexType: {
 					original: '(event: globalThis.Event) => void',

package/dist/collection/components/ontario-textarea/ontario-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"ontario-textarea.js","sourceRoot":"","sources":["../../../src/components/ontario-textarea/ontario-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the textarea label.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-textarea\n\t *   caption='{\n\t *     \"captionText\": \"What are your thoughts\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name: \"textarea\"\n\t *   hint-expander='{\n\t *     \"hint\": \"This is the hint expander\",\n\t *     \"content\": \"This is the content for the hint expander\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the textarea onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a input event occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-textarea> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}
+{"version":3,"file":"ontario-textarea.js","sourceRoot":"","sources":["../../../src/components/ontario-textarea/ontario-textarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the textarea label.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The unique identifier of the textarea. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-textarea\n\t *   caption='{\n\t *     \"captionText\": \"What are your thoughts\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name: \"textarea\"\n\t *   hint-expander='{\n\t *     \"hint\": \"This is the hint expander\",\n\t *     \"content\": \"This is the content for the hint expander\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the textarea onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the textarea onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Emitted when a input event occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the textarea component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-textarea> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the textarea `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-textarea--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></textarea>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\tinput-exists\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}