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

package/dist/components/ontario-task.js

@@ -0,0 +1,354 @@
+import { p as proxyCustomElement, H, h, F as Fragment } from './index.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { T as TaskStatuses, a as TaskToBadgeColour } from './p-A8xwC5QP.js';
+import { v as validateValueAgainstArray, b as validateLanguage } from './p-CNqFEifG.js';
+import { c as constructHintTextObject } from './p-CkusvkRr.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$3 } from './p-DFHrahxt.js';
+import { d as defineCustomElement$2 } from './p-Br8HOVJk.js';
+
+const ontarioTaskCss =
+	'.ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-task{border-bottom:0.125rem solid #cccccc;padding:1.1875rem 0;list-style:none}.ontario-task__content{display:flex;justify-content:space-between;align-items:center}@media screen and (max-width: 40em){.ontario-task__content{display:flex;flex-direction:column;align-items:flex-start}}.ontario-task__label{text-align:left;margin:0;font-size:1.1875rem;font-weight:600;display:inline-block}@media screen and (max-width: 40em){.ontario-task__label{margin-bottom:0.5rem}}.ontario-task__label a{text-decoration:none;color:inherit}.ontario-task__label a:hover{text-decoration:underline}.ontario-task__link{display:block;text-decoration:underline;color:#0066CC;font-weight:normal}.ontario-task__hint-text--true{margin-bottom:0.5rem}.ontario-task__link:focus{outline:none;box-shadow:none}.ontario-task__link:focus .ontario-task__label{box-shadow:0 0 0 4px #009ADB inset}.ontario-task:has(.ontario-task__link):hover{background-color:#f2f2f2}.ontario-task--status-completed .ontario-task__link .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link .ontario-task__label,.ontario-task--status-optional .ontario-task__link .ontario-task__label,.ontario-task--status-error .ontario-task__link .ontario-task__label{color:#0066CC;text-decoration:underline}.ontario-task--status-completed .ontario-task__link:visited .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:visited .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:visited .ontario-task__label,.ontario-task--status-optional .ontario-task__link:visited .ontario-task__label,.ontario-task--status-error .ontario-task__link:visited .ontario-task__label{color:#551A8B}.ontario-task--status-completed .ontario-task__link:hover .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:hover .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:hover .ontario-task__label,.ontario-task--status-optional .ontario-task__link:hover .ontario-task__label,.ontario-task--status-error .ontario-task__link:hover .ontario-task__label{color:#00478F}.ontario-task--status-completed .ontario-task__link:active .ontario-task__label,.ontario-task--status-inprogress .ontario-task__link:active .ontario-task__label,.ontario-task--status-notstarted .ontario-task__link:active .ontario-task__label,.ontario-task--status-optional .ontario-task__link:active .ontario-task__label,.ontario-task--status-error .ontario-task__link:active .ontario-task__label{color:#002142}ontario-hint-text::part(hint-text){margin:0}@media screen and (max-width: 40em){ontario-hint-text::part(hint-text){margin-top:0.5rem}}';
+
+const OntarioTask$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTask extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+		}
+		get el() {
+			return this;
+		}
+		// Reference to the ontario-hint-text element for this task.
+		hintTextRef;
+		/**
+		 * Specifies the label of the task.
+		 *
+		 * This is required to provide the name of the task.
+		 */
+		label;
+		/**
+		 * A unique id for the task.
+		 *
+		 * This is required.
+		 */
+		taskId;
+		/**
+		 * Specifies an optional link associated with the task.
+		 *
+		 * If provided, clicking the task will navigate to this URL.
+		 */
+		link;
+		/**
+		 * Disables the task link when set to `true`.
+		 *
+		 * Default is `false`, meaning the link will be active if provided.
+		 */
+		deactivateLink = false;
+		/**
+		 * 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 no language is passed, it will default to English.
+		 */
+		language;
+		/**
+		 * Used to include the ontario-hint-text component for the task.
+		 *
+		 * This is optional.
+		 */
+		hintText;
+		/**
+		 * Defines the status of the task, with default set to 'NotStarted'.
+		 *
+		 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.
+		 */
+		/**
+		 * Defines the status of the task, with default set to 'NotStarted'.
+		 *
+		 * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.
+		 */
+		taskStatus = TaskStatuses.NotStarted;
+		/**
+		 * Allows consumers to define the heading level for the task label.
+		 *
+		 * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.
+		 */
+		headingLevel = 'h3';
+		/**
+		 * The hint text options are re-assigned to the internalHintText state.
+		 */
+		internalHintText;
+		/**
+		 * Mutable variable, for internal use only.
+		 *
+		 * Set the task's status state depending on validation result.
+		 */
+		taskStatusState = TaskStatuses.NotStarted;
+		/**
+		 * Watch for changes in `taskStatus` prop to validate its value.
+		 */
+		validateTaskStatus() {
+			const validStatuses = Object.values(TaskStatuses);
+			const isValidStatus = validStatuses.includes(this.taskStatus);
+			this.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();
+			// Update the `data-task-status` attribute
+			this.el.setAttribute('data-task-status', this.taskStatusState);
+		}
+		/**
+		 * Logs a warning to the console if the `taskStatus` prop is set to an invalid value.
+		 *
+		 * This function informs developers that the provided `taskStatus` is not recognized
+		 * and resets the status to the default value of `'notStarted'`. The warning message
+		 * specifies the valid task statuses to help guide correct usage.
+		 *
+		 * @returns The default task status `'notStarted'`.
+		 */
+		warnAndGetDefaultTaskStatus() {
+			const validStatuses = Object.values(TaskStatuses).join(', ');
+			const message = new ConsoleMessageClass();
+			message
+				.addDesignSystemTag()
+				.addMonospaceText(' taskStatus ')
+				.addRegularText('on')
+				.addMonospaceText(' <ontario-task> ')
+				.addRegularText('was set to an invalid taskStatus; only ')
+				.addMonospaceText(validStatuses)
+				.addRegularText(' are supported. The default taskStatus ')
+				.addMonospaceText(TaskStatuses.NotStarted)
+				.addRegularText(' is assumed.')
+				.printMessage();
+			return TaskStatuses.NotStarted;
+		}
+		/**
+		 * Watch for changes in `headingLevel` prop to validate its value.
+		 */
+		validateHeadingLevel(newValue) {
+			const allowedValues = ['h2', 'h3', 'h4'];
+			// 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> ')
+					.addRegularText('was set to an invalid value; only ')
+					.addMonospaceText(allowedValues.join(', '))
+					.addRegularText(' are supported. The default value ')
+					.addMonospaceText('h3')
+					.addRegularText(' is assumed.')
+					.printMessage();
+				this.headingLevel = 'h3';
+			}
+		}
+		/**
+		 * Watch for changes in `hintText` prop and parse it if available.
+		 *
+		 * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,
+		 * and the result will be stored in the `internalHintText` state.
+		 */
+		parseHintText() {
+			if (this.hintText) {
+				const hintTextObject = constructHintTextObject(this.hintText);
+				this.internalHintText = hintTextObject;
+			}
+		}
+		/**
+		 * Listen for app language settings on the window to update the component language.
+		 */
+		handleSetAppLanguage(event) {
+			if (!this.language) {
+				this.language = validateLanguage(event);
+			}
+		}
+		/**
+		 * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.
+		 * It is used for changing the component language after the language toggle has been activated.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event);
+		}
+		/**
+		 * Determines the badge colour based on the current `taskStatusState`.
+		 *
+		 * @returns {TaskBadgeColour}
+		 */
+		getBadgeColour() {
+			return TaskToBadgeColour[this.taskStatusState] || 'grey';
+		}
+		/**
+		 * Provides a translated task status string based on the current language.
+		 */
+		getTranslatedTaskStatus() {
+			const resolvedLanguage = validateLanguage(this.language);
+			return translations.taskStatus[this.taskStatusState][resolvedLanguage];
+		}
+		/**
+		 * Renders hint text if available.
+		 */
+		renderHintText() {
+			if (this.internalHintText) {
+				return h('ontario-hint-text', {
+					hint: this.internalHintText.hint,
+					hintContentType: this.internalHintText.hintContentType,
+					ref: (el) => (this.hintTextRef = el),
+				});
+			}
+			return null;
+		}
+		/**
+		 * Returns the class name(s) for the task label.
+		 */
+		getClass() {
+			return ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');
+		}
+		/**
+		 * Renders the task label and status content.
+		 *
+		 * This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,
+		 * as well as the badge indicating the task status.
+		 */
+		renderTaskContent() {
+			const headingProps = {
+				id: `task-label--${this.taskId}`,
+				class: this.getClass(),
+			};
+			return h(
+				'div',
+				{ class: 'ontario-task__content' },
+				h(this.headingLevel, headingProps, this.label),
+				this.taskStatusState &&
+					h(
+						'ontario-badge',
+						{
+							'class': 'ontario-task__badge',
+							'role': 'status',
+							'aria-label': `${translations.taskStatus.taskStatus[validateLanguage(this.language)]} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`,
+							'colour': this.getBadgeColour(),
+						},
+						this.getTranslatedTaskStatus(),
+					),
+			);
+		}
+		/**
+		 * After the component loads, retrieve the hint text ID (if available) from the hintText component,
+		 * and set it for the `aria-describedby` attribute.
+		 */
+		async componentDidLoad() {
+			if (this.hintTextRef) {
+				let hintTextId = this.hintTextRef.elementId;
+				if (!hintTextId) {
+					hintTextId = `hint-text--${this.taskId}`;
+					this.hintTextRef.elementId = hintTextId;
+				}
+				const taskElement = this.el.shadowRoot?.querySelector('li');
+				if (taskElement) {
+					taskElement.setAttribute('aria-describedby', hintTextId);
+				}
+			}
+		}
+		/**
+		 * Lifecycle method: before the component loads, parse the hint text and
+		 * validate language and task status and heading level.
+		 */
+		async componentWillLoad() {
+			this.parseHintText();
+			this.language = validateLanguage(this.language);
+			this.validateTaskStatus();
+			this.validateHeadingLevel(this.headingLevel);
+		}
+		render() {
+			const isLinkActive = this.link && !this.deactivateLink;
+			const taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
+			const taskContent = h(
+				Fragment,
+				{ key: '4968807e30ded9336a79d517b25cd0bd35a14a3d' },
+				this.renderTaskContent(),
+				this.renderHintText(),
+			);
+			return h(
+				'li',
+				{
+					'key': 'a000b87343f37fbdcee5e96cada8c0344e1a7218',
+					'class': `ontario-task ${taskStatusClass}`,
+					'role': 'group',
+					'aria-labelledby': `task-label--${this.taskId}`,
+					'data-task-status': this.taskStatusState,
+				},
+				isLinkActive
+					? h('a', { 'href': this.link, 'class': 'ontario-task__link', 'aria-label': this.label }, taskContent)
+					: h('div', null, taskContent),
+			);
+		}
+		static get watchers() {
+			return {
+				taskStatus: ['validateTaskStatus'],
+				headingLevel: ['validateHeadingLevel'],
+				hintText: ['parseHintText'],
+			};
+		}
+		static get style() {
+			return ontarioTaskCss;
+		}
+	},
+	[
+		1,
+		'ontario-task',
+		{
+			label: [1],
+			taskId: [1, 'task-id'],
+			link: [1],
+			deactivateLink: [4, 'deactivate-link'],
+			language: [1025],
+			hintText: [1025, 'hint-text'],
+			taskStatus: [1, 'task-status'],
+			headingLevel: [1, 'heading-level'],
+			internalHintText: [32],
+			taskStatusState: [32],
+		},
+		[
+			[8, 'setAppLanguage', 'handleSetAppLanguage'],
+			[8, 'headerLanguageToggled', 'handleHeaderLanguageToggled'],
+		],
+		{
+			taskStatus: ['validateTaskStatus'],
+			headingLevel: ['validateHeadingLevel'],
+			hintText: ['parseHintText'],
+		},
+	],
+);
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-task', 'ontario-badge', 'ontario-hint-text'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-task':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioTask$1);
+				}
+				break;
+			case 'ontario-badge':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$3();
+				}
+				break;
+			case 'ontario-hint-text':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+		}
+	});
+}
+
+const OntarioTask = OntarioTask$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioTask, defineCustomElement };
+//# sourceMappingURL=ontario-task.js.map
+
+//# sourceMappingURL=ontario-task.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-task.js","mappings":";;;;;;;;;AAAA,MAAM,cAAc,GAAG,qyFAAqyF;;MCgB/yFA,aAAW,iBAAAC,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;AAIvB,IAAA,WAAW;AAEX;;;;AAIG;AACK,IAAA,KAAK;AAEb;;;;AAIG;AACK,IAAA,MAAM;AAEd;;;;AAIG;AACK,IAAA,IAAI;AAEZ;;;;AAIG;IACK,cAAc,GAAY,KAAK;AAEvC;;;;AAIG;AACsB,IAAA,QAAQ;AAEjC;;;;AAIG;AACsB,IAAA,QAAQ;AAEjC;;;;AAIG;AACH;;;;AAIG;AACK,IAAA,UAAU,GAAiB,YAAY,CAAC,UAAU;AAE1D;;;;AAIG;IACK,YAAY,GAAqB,IAAI;AAE7C;;AAEG;AACc,IAAA,gBAAgB;AAEjC;;;;AAIG;AACc,IAAA,eAAe,GAAiB,YAAY,CAAC,UAAU;AACxE;;AAEG;IAEH,kBAAkB,GAAA;QACjB,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC;QACjD,MAAM,aAAa,GAAG,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;AAC7D,QAAA,IAAI,CAAC,eAAe,GAAG,aAAa,GAAG,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,2BAA2B,EAAE;;QAG3F,IAAI,CAAC,EAAE,CAAC,YAAY,CAAC,kBAAkB,EAAE,IAAI,CAAC,eAAe,CAAC;;AAG/D;;;;;;;;AAQG;IACK,2BAA2B,GAAA;AAClC,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AAC5D,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,cAAc;aAC/B,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,yCAAyC;aACxD,gBAAgB,CAAC,aAAa;aAC9B,cAAc,CAAC,yCAAyC;AACxD,aAAA,gBAAgB,CAAC,YAAY,CAAC,UAAU;aACxC,cAAc,CAAC,cAAc;AAC7B,aAAA,YAAY,EAAE;QAChB,OAAO,YAAY,CAAC,UAAU;;AAG/B;;AAEG;AAEH,IAAA,oBAAoB,CAAC,QAAgB,EAAA;QACpC,MAAM,aAAa,GAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;;QAG5D,MAAM,OAAO,GAAG,yBAAyB,CAAC,QAAQ,EAAE,aAAa,CAAC;QAElE,IAAI,CAAC,OAAO,EAAE;AACb,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,gBAAgB;iBACjC,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,kBAAkB;iBACnC,cAAc,CAAC,oCAAoC;AACnD,iBAAA,gBAAgB,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;iBACzC,cAAc,CAAC,oCAAoC;iBACnD,gBAAgB,CAAC,IAAI;iBACrB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAEhB,YAAA,IAAI,CAAC,YAAY,GAAG,IAAI;;;AAI1B;;;;;AAKG;IAEK,aAAa,GAAA;AACpB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,cAAc,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC;AAC7D,YAAA,IAAI,CAAC,gBAAgB,GAAG,cAAc;;;AAIxC;;AAEG;AAEH,IAAA,oBAAoB,CAAC,KAA4B,EAAA;AAChD,QAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;AACnB,YAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC;;;AAIzC;;;AAGG;AAEH,IAAA,2BAA2B,CAAC,KAA4B,EAAA;AACvD,QAAA,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC;;AAGxC;;;;AAIG;IACK,cAAc,GAAA;QACrB,OAAO,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,MAAM;;AAGzD;;AAEG;IACK,uBAAuB,GAAA;QAC9B,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;QACxD,OAAO,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC;;AAGvE;;AAEG;IACK,cAAc,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AAC1B,YAAA,QACC,CAAA,CAAA,mBAAA,EAAA,EACC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAChC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EACtD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,EAAA,CAChB;;AAGvB,QAAA,OAAO,IAAI;;AAGZ;;AAEG;IACK,QAAQ,GAAA;AACf,QAAA,OAAO,CAAC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,+BAA+B,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;;AAG3G;;;;;AAKG;IACK,iBAAiB,GAAA;AACxB,QAAA,MAAM,YAAY,GAAQ;AACzB,YAAA,EAAE,EAAE,CAAA,YAAA,EAAe,IAAI,CAAC,MAAM,CAAE,CAAA;AAChC,YAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE;SACtB;AAED,QAAA,QACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,EAC9C,IAAI,CAAC,eAAe,KACpB,CAAA,CAAA,eAAA,EAAA,EACC,KAAK,EAAC,qBAAqB,EAC3B,IAAI,EAAC,QAAQ,gBACD,GACX,YAAY,CAAC,UAAU,CAAC,UAAU,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CACnE,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAA,EAAA,EAAK,IAAI,CAAC,eAAe,CAAG,CAAA,CAAA,EAC9D,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,EAAA,EAE5B,IAAI,CAAC,uBAAuB,EAAE,CAChB,CAChB,CACI;;AAIR;;;AAGG;AACH,IAAA,MAAM,gBAAgB,GAAA;AACrB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACrB,YAAA,IAAI,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS;YAE3C,IAAI,CAAC,UAAU,EAAE;AAChB,gBAAA,UAAU,GAAG,CAAc,WAAA,EAAA,IAAI,CAAC,MAAM,EAAE;AACxC,gBAAA,IAAI,CAAC,WAAW,CAAC,SAAS,GAAG,UAAU;;AAGxC,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,IAAI,CAAC;YAC3D,IAAI,WAAW,EAAE;AAChB,gBAAA,WAAW,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAU,CAAC;;;;AAK3D;;;AAGG;AACH,IAAA,MAAM,iBAAiB,GAAA;QACtB,IAAI,CAAC,aAAa,EAAE;QACpB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/C,IAAI,CAAC,kBAAkB,EAAE;AACzB,QAAA,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC;;IAG7C,MAAM,GAAA;QACL,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,cAAc;AACtD,QAAA,MAAM,eAAe,GAAG,CAAA,qBAAA,EAAwB,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,EAAE;QAExH,MAAM,WAAW,IAChB,CAAA,CAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,cAAc,EAAE,CACZ,CACX;AAED,QAAA,QACC,CACC,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,aAAA,EAAgB,eAAe,CAAE,CAAA,EACxC,IAAI,EAAC,OAAO,EAAA,iBAAA,EACK,CAAe,YAAA,EAAA,IAAI,CAAC,MAAM,EAAE,EAC3B,kBAAA,EAAA,IAAI,CAAC,eAAe,EAErC,EAAA,YAAY,IACZ,SAAG,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAC,oBAAoB,EAAA,YAAA,EAAa,IAAI,CAAC,KAAK,EAAA,EACnE,WAAW,CACT,KAEJ,CAAM,CAAA,KAAA,EAAA,IAAA,EAAA,WAAW,CAAO,CACxB,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioTask","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-task/ontario-task.scss?tag=ontario-task&encapsulation=shadow","src/components/ontario-task/ontario-task.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-task {\n\tborder-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-0;\n\tlist-style: none;\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t}\n\t}\n\n\t&__label {\n\t\ttext-align: left;\n\t\tmargin: spacing.$spacing-0;\n\t\tfont-size: globalFunctions.px-to-rem(19);\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\tdisplay: inline-block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: inherit;\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__link {\n\t\tdisplay: block;\n\t\ttext-decoration: underline;\n\t\tcolor: colours.$ontario-colour-link;\n\t\tfont-weight: normal;\n\t}\n\n\t&__hint-text--true {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-task__link:focus {\n\toutline: none;\n\tbox-shadow: none;\n\n\t.ontario-task__label {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n}\n\n.ontario-task:has(.ontario-task__link) {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n@mixin link-states {\n\t&:visited .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--visited;\n\t}\n\t&:hover .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\t&:active .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-task {\n\t&--status-completed,\n\t&--status-inprogress,\n\t&--status-notstarted,\n\t&--status-optional,\n\t&--status-error {\n\t\t.ontario-task__link {\n\t\t\t.ontario-task__label {\n\t\t\t\tcolor: colours.$ontario-colour-link;\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t\t@include link-states;\n\t\t}\n\t}\n}\n\nontario-hint-text::part(hint-text) {\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-2;\n\t}\n}\n","import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * Specifies the label of the task.\n\t *\n\t * This is required to provide the name of the task.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * A unique id for the task.\n\t *\n\t * This is required.\n\t */\n\t@Prop() taskId: string;\n\n\t/**\n\t * Specifies an optional link associated with the task.\n\t *\n\t * If provided, clicking the task will navigate to this URL.\n\t */\n\t@Prop() link?: string;\n\n\t/**\n\t * Disables the task link when set to `true`.\n\t *\n\t * Default is `false`, meaning the link will be active if provided.\n\t */\n\t@Prop() deactivateLink: boolean = false;\n\n\t/**\n\t * The language of the component.\n\t *\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 * Used to include the ontario-hint-text component for the task.\n\t *\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) hintText?: string | Hint;\n\n\t/**\n\t * Defines the status of the task, with default set to 'NotStarted'.\n\t *\n\t * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t */\n\t/**\n\t * Defines the status of the task, with default set to 'NotStarted'.\n\t *\n\t * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t */\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/**\n\t * Allows consumers to define the heading level for the task label.\n\t *\n\t * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t */\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText state.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set the task's status state depending on validation result.\n\t */\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\t/**\n\t * Watch for changes in `taskStatus` prop to validate its value.\n\t */\n\t@Watch('taskStatus')\n\tvalidateTaskStatus() {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(this.taskStatus);\n\t\tthis.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/**\n\t * Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t *\n\t * This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t *\n\t * @returns The default task status `'notStarted'`.\n\t */\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\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: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\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> ')\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('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in `hintText` prop and parse it if available.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in 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 * Listen for app language settings on the window to update the component language.\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/**\n\t * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Determines the badge colour based on the current `taskStatusState`.\n\t *\n\t * @returns {TaskBadgeColour}\n\t */\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] || 'grey';\n\t}\n\n\t/**\n\t * Provides a translated task status string based on the current language.\n\t */\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/**\n\t * Renders hint text if available.\n\t */\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns the class name(s) for the task label.\n\t */\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/**\n\t * Renders the task label and status content.\n\t *\n\t * This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t */\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\n\t\t\tconst taskElement = this.el.shadowRoot?.querySelector('li');\n\t\t\tif (taskElement) {\n\t\t\t\ttaskElement.setAttribute('aria-describedby', hintTextId);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateTaskStatus();\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\n\t\tconst taskContent = (\n\t\t\t<Fragment>\n\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t{this.renderHintText()}\n\t\t\t</Fragment>\n\t\t);\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{taskContent}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{taskContent}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-textarea.js

@@ -1,20 +1,19 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
-import { v as validateLanguage, b as validatePropExists } from './p-edb765a1.js';
-import { C as ConsoleMessageClass } from './p-b2019a19.js';
-import { c as constructHintTextObject } from './p-e77d78ce.js';
-import { t as translations } from './p-a5331e15.js';
-import { E as ErrorMessage } from './p-8874216e.js';
-import { d as defineCustomElement$6 } from './p-9c61c9bc.js';
-import { d as defineCustomElement$5 } from './p-226df20b.js';
-import { d as defineCustomElement$4 } from './p-c13fee12.js';
-import { d as defineCustomElement$3 } from './p-1dc1dba8.js';
-import { d as defineCustomElement$2 } from './p-77545837.js';
-import { v as v4 } from './p-a8cac0fc.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CJ1sSyqT.js';
+import { b as validateLanguage, a as validatePropExists } from './p-CNqFEifG.js';
+import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { c as constructHintTextObject } from './p-CkusvkRr.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { E as ErrorMessage } from './p-DcoC7PVV.js';
+import { d as defineCustomElement$6 } from './p-orSa-v1r.js';
+import { d as defineCustomElement$5 } from './p-Br8HOVJk.js';
+import { d as defineCustomElement$4 } from './p-BeNeXjVo.js';
+import { d as defineCustomElement$3 } from './p-DyZbYpqr.js';
+import { d as defineCustomElement$2 } from './p-pYZtHvSO.js';
+import { v as v4 } from './p-BF0_OXTe.js';
 
 const ontarioTextareaCss =
 	'@charset "UTF-8";.ontario-textarea:focus,.ontario-textarea:active,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}​p{margin:0 0 1.5rem 0}​p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}.ontario-textarea{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;display:block;max-width:48rem;min-height:144px;margin:0 0 2.5rem;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out;white-space:pre-wrap;width:100%}.ontario-textarea.ontario-textarea-hint-expander--true{margin-bottom:1rem}.ontario-textarea--error textarea{border:0.125rem solid #CD0000}';
-const OntarioTextareaStyle0 = ontarioTextareaCss;
 
 const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioTextarea extends H {
@@ -22,11 +21,11 @@ const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.inputOnInput = createEvent(this, 'inputOnInput', 7);
-			this.inputOnChange = createEvent(this, 'inputOnChange', 7);
-			this.inputOnBlur = createEvent(this, 'inputOnBlur', 7);
-			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
-			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
+			this.inputOnInput = createEvent(this, 'inputOnInput');
+			this.inputOnChange = createEvent(this, 'inputOnChange');
+			this.inputOnBlur = createEvent(this, 'inputOnBlur');
+			this.inputOnFocus = createEvent(this, 'inputOnFocus');
+			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred');
 			this.internals = this.attachInternals();
 		}
 		get element() {
@@ -283,20 +282,20 @@ const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 			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(),
@@ -310,7 +309,7 @@ const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 				}),
 				this.internalHintExpander &&
 					h('ontario-hint-expander', {
-						'key': 'dcac37a52925f69a3e936877646139de6c7a811c',
+						'key': 'db0a618f1c0296dd1a6dcd014153b00925371d97',
 						'hint': this.internalHintExpander.hint,
 						'content': this.internalHintExpander.content,
 						'hintContentType': this.internalHintExpander.hintContentType,
@@ -332,7 +331,7 @@ const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioTextareaStyle0;
+			return ontarioTextareaCss;
 		}
 	},
 	[
@@ -348,10 +347,10 @@ const OntarioTextarea$1 = /*@__PURE__*/ proxyCustomElement(
 			hintExpander: [1, 'hint-expander'],
 			language: [1025],
 			errorMessage: [1025, 'error-message'],
-			customOnInput: [16],
-			customOnChange: [16],
-			customOnBlur: [16],
-			customOnFocus: [16],
+			customOnInput: [16, 'custom-on-input'],
+			customOnChange: [16, 'custom-on-change'],
+			customOnBlur: [16, 'custom-on-blur'],
+			customOnFocus: [16, 'custom-on-focus'],
 			hintTextId: [32],
 			internalHintText: [32],
 			internalHintExpander: [32],
@@ -423,5 +422,6 @@ const OntarioTextarea = OntarioTextarea$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { OntarioTextarea, defineCustomElement };
+//# sourceMappingURL=ontario-textarea.js.map
 
 //# sourceMappingURL=ontario-textarea.js.map

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

@@ -1 +1 @@
-{"file":"ontario-textarea.js","mappings":";;;;;;;;;;;;;;AAAA,MAAM,kBAAkB,GAAG,y5TAAy5T,CAAC;AACr7T,8BAAe,kBAAkB;;MC4BpBA,iBAAe;;;;;;;;;;;;;IAER,SAAS,CAAmB;IAE/C,WAAW,CAAyC;;;;;;;;;;;;;;IAe5C,OAAO,CAAmB;;;;IAK1B,IAAI,CAAS;;;;IAKI,SAAS,CAAU;;;;;;IAOpC,QAAQ,GAAa,KAAK,CAAC;;;;IAKV,KAAK,CAAU;;;;;;IAOhC,QAAQ,CAAiB;;;;;;;;;;;;;;;;;;;;;;IAuBzB,YAAY,CAAyB;;;;;IAMpB,QAAQ,CAAY;;;;IAKpB,YAAY,CAAU;;;;IAKvC,aAAa,CAAqC;;;;IAKlD,cAAc,CAAqC;;;;IAKnD,YAAY,CAAqC;;;;IAKjD,aAAa,CAAqC;;;;IAKjD,UAAU,CAA4B;;;;IAK9B,gBAAgB,CAAO;;;;IAKvB,oBAAoB,CAAe;;;;IAKnC,YAAY,CAAe;;;;IAKnC,YAAY,CAAgC;;;;IAK5C,aAAa,CAAsC;;;;IAKnD,WAAW,CAAoC;;;;IAK/C,YAAY,CAAoC;;;;IAKhD,kBAAkB,CAA0D;;;;IAMrF,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;;;IAQO,aAAa;QACpB,IAAI,IAAI,CAAC,QAAQ,EAAE;YAClB,MAAM,cAAc,GAAG,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC9D,IAAI,CAAC,gBAAgB,GAAG,cAAc,CAAC;SACvC;KACD;;;;;;IAQO,iBAAiB;QACxB,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,YAAY,EAAE;YACjB,IAAI,OAAO,YAAY,KAAK,QAAQ;gBAAE,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;;gBACtF,IAAI,CAAC,oBAAoB,GAAG,YAAY,CAAC;SAC9C;KACD;;;;;;;IASD,YAAY,CAAC,QAAgB;QAC5B,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE;YACjC,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,QAAQ,CAAC;iBAC1B,cAAc,CAAC,KAAK,CAAC;iBACrB,gBAAgB,CAAC,sBAAsB,CAAC;iBACxC,cAAc,CAAC,kBAAkB,CAAC;iBAClC,YAAY,EAAE,CAAC;SACjB;KACD;;;;;;;IASO,kBAAkB,CAAC,QAA0B;QACpD,IAAI,CAAC,YAAY,GAAG,IAAI,YAAY,CACnC,IAAI,CAAC,OAAO,CAAC,OAAO,EACpB,QAAQ,EACR,YAAY,EACZ,IAAI,CAAC,QAAQ,EACb,KAAK,EACL,IAAI,CAAC,QAAQ,CACb,CAAC;KACF;;;;IAMD,cAAc;QACb,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACtC;IAGD,gCAAgC;;QAE/B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,YAAY,IAAI,EAAE,EAAE,CAAC,CAAC;KAC/F;;;;IAKO,WAAW,CAAC,KAAY,EAAE,SAAoB;QACrD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAoC,CAAC;QAEzD,IAAI,CAAC,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;QAEnD,gBAAgB,CACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,YAAY,EACjB,OAAO,EACP,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,YAAY,EACjB,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,OAAO,CACZ,CAAC;KACF;IAEM,KAAK;QACX,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;KAC5B;IAEO,QAAQ;QACf,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;KACxB;IAEO,QAAQ;QACf,OAAO,IAAI,CAAC,YAAY,GAAG,uDAAuD,GAAG,kBAAkB,CAAC;KACxG;;;;IAKD,MAAM,gBAAgB;QACrB,IAAI,CAAC,UAAU,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,aAAa,EAAE,CAAC;KAC1D;IAED,iBAAiB;QAChB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,IAAIC,EAAI,EAAE,CAAC;QAC1C,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,MAAM,KAAK,GAAG,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC;QAClC,QACC,4DAAK,KAAK,EAAE,sBAAsB,KAAK,GAAG,yBAAyB,GAAG,EAAE,EAAE,IACxE,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,EACvE,IAAI,CAAC,gBAAgB,KACrB,0EACC,IAAI,EAAE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAChC,eAAe,EAAE,IAAI,CAAC,gBAAgB,CAAC,eAAe,EACtD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,WAAW,GAAG,EAAE,CAAC,GAChB,CACrB,EACD,EAAC,YAAY,qDAAC,OAAO,EAAE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,KAAK,GAAI,EAC1D,qFACmB,IAAI,CAAC,UAAU,EACjC,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,EAAE,EAAE,IAAI,CAAC,KAAK,EAAE,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,EACtD,MAAM,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC,EAClD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,GACd,EACX,IAAI,CAAC,oBAAoB,KACzB,8EACC,IAAI,EAAE,IAAI,CAAC,oBAAoB,CAAC,IAAI,EACpC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAC1C,eAAe,EAAE,IAAI,CAAC,oBAAoB,CAAC,eAAe,yBAElC,CACzB,CACI,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioTextarea","uuid"],"sources":["src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: 0 0 spacing.$spacing-7;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","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","mappings":"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","names":["OntarioTextarea","__stencil_proxyCustomElement","HTMLElement","uuid"],"sources":["src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: 0 0 spacing.$spacing-7;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","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}