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

package/components/ontario-task-list.js

@@ -0,0 +1,211 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.js';
+import { v as validateValueAgainstArray, b as validateLanguage } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { T as TaskStatuses } from './p-A8xwC5QP.js';
+
+const ontarioTaskListCss =
+	'.ontario-task-list{border-top:0.125rem solid #cccccc;padding:0;margin:0 0.5rem}.ontario-task-list__item{max-width:100%;list-style-type:none}';
+
+const OntarioTaskList$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTaskList extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * Allows consumers to define the heading level for the task list component.
+			 *
+			 * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.
+			 */
+			this.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.
+			 */
+			this.language = 'en';
+			/**
+			 * State to track the number of completed tasks.
+			 */
+			this.completedTasks = 0;
+			/**
+			 * State to track the total number of tasks.
+			 */
+			this.totalTasks = 0;
+		}
+		/**
+		 * 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() {
+			var _a;
+			const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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() {
+			var _a;
+			const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.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: 'a389053e03a8d52095e0a04f2600d4d901ede22b', class: 'ontario-task-list__container' },
+				h(this.headingLevel, headingProps, this.label),
+				h(
+					'p',
+					{
+						'key': '042d4bdcb20ea407a5447ce39086bc1bfae79697',
+						'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: 'bbb9b7ce952f9c83cc090b504f87e5253bde8368', class: 'ontario-task-list', role: 'list' },
+					h('slot', { key: '4337d382dcc73690ef4b9cb98a3ed69972f9e20e' }),
+				),
+			);
+		}
+		get el() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				headingLevel: ['validateHeadingLevel'],
+			};
+		}
+		static get style() {
+			return ontarioTaskListCss;
+		}
+	},
+	[
+		257,
+		'ontario-task-list',
+		{
+			label: [1],
+			headingLevel: [1, 'heading-level'],
+			language: [1025],
+			completedTasks: [32],
+			totalTasks: [32],
+		},
+		undefined,
+		{
+			headingLevel: ['validateHeadingLevel'],
+		},
+	],
+);
+/**
+ * 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.
+ */
+OntarioTaskList$1.TASK_COUNT_DELAY_MS = 50;
+function defineCustomElement$1() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-task-list'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-task-list':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioTaskList$1);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioTaskList = OntarioTaskList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioTaskList, defineCustomElement };
+//# sourceMappingURL=ontario-task-list.js.map
+
+//# sourceMappingURL=ontario-task-list.js.map

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

@@ -0,0 +1 @@
+{"file":"ontario-task-list.js","mappings":"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","names":["OntarioTaskList","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-task-list/ontario-task-list.scss?tag=ontario-task-list&encapsulation=shadow","src/components/ontario-task-list/ontario-task-list.tsx"],"sourcesContent":["@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n\n.ontario-task-list {\n\tborder-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0 spacing.$spacing-2;\n}\n\n.ontario-task-list__item {\n\tmax-width: globalVariables.$full-width;\n\tlist-style-type: none;\n}\n","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"],"version":3}

package/components/ontario-task.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioTask extends Components.OntarioTask, HTMLElement {}
+export const OntarioTask: {
+	prototype: OntarioTask;
+	new (): OntarioTask;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/ontario-task.js

@@ -0,0 +1,327 @@
+import { p as proxyCustomElement, H, h } from './index.js';
+import { C as ConsoleMessageClass } from './p-Cdm-Ot0O.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-CIdZS10A.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$3 } from './p-6uqsTY-M.js';
+import { d as defineCustomElement$2 } from './p-BBhl-3u7.js';
+
+const ontarioTaskCss =
+	'.ontario-task{border-bottom:0.125rem solid #cccccc;padding:1.25rem 0;list-style:none}.ontario-task__content{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:1rem}@media screen and (max-width: 40em){.ontario-task__content{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0.5rem}}.ontario-task .ontario-task__text{display:flex;flex-direction:column}.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:none;color:#0066CC;font-weight:normal}.ontario-task__hint-text--true{margin-bottom:0.5rem}.ontario-task--error{padding-left:1rem;border-left:0.25rem solid #CD0000;margin-left:-0.125rem}.ontario-task .ontario-hint{margin-bottom:0}.ontario-task:focus-within{outline:4px solid #009ADB}.ontario-task__link .ontario-task__label{text-decoration:underline}.ontario-task__link:focus{outline:none;box-shadow:none}.ontario-task:has(.ontario-task__link):hover{background-color:rgb(242.25, 242.25, 242.25)}.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}';
+
+const OntarioTask$1 = /*@__PURE__*/ proxyCustomElement(
+	class OntarioTask extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * Disables the task link when set to `true`.
+			 *
+			 * Default is `false`, meaning the link will be active if provided.
+			 */
+			this.deactivateLink = false;
+			/**
+			 * 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.
+			 */
+			this.taskStatus = TaskStatuses.NotStarted;
+			/**
+			 * Allows consumers to define the heading level for the task label.
+			 *
+			 * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.
+			 */
+			this.headingLevel = 'h3';
+			/**
+			 * Mutable variable, for internal use only.
+			 *
+			 * Set the task's status state depending on validation result.
+			 */
+			this.taskStatusState = 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;
+			}
+		}
+		/**
+		 * Watch for changes in `taskStatus` prop to validate its value.
+		 */
+		validateTaskStatus(newValue) {
+			const validStatuses = Object.values(TaskStatuses);
+			const isValidStatus = validStatuses.includes(newValue);
+			if (isValidStatus) {
+				this.taskStatusState = newValue;
+			} else {
+				// If the status is invalid, log a warning and use the default
+				this.taskStatusState = this.warnAndGetDefaultTaskStatus();
+			}
+			// Update the `data-task-status` attribute
+			this.el.setAttribute('data-task-status', this.taskStatusState);
+		}
+		/**
+		 * Listen for app language settings on the window to update the component language.
+		 */
+		handleSetAppLanguage(event) {
+			if (!this.language) {
+				this.language = validateLanguage(event);
+			}
+		}
+		/**
+		 * Handles an update to the language should the user request a language update from the language toggle.
+		 * @param {CustomEvent} - The language that has been selected.
+		 */
+		handleHeaderLanguageToggled(event) {
+			this.language = validateLanguage(event.detail.newLanguage);
+		}
+		/**
+		 * 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,
+					elementId: `hint-text--${this.taskId}`,
+					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(' ');
+		}
+		/**
+		 * 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;
+		}
+		/**
+		 * 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(
+					'div',
+					{ class: 'ontario-task__text' },
+					h(this.headingLevel, headingProps, this.label),
+					this.renderHintText(),
+				),
+				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;
+				}
+			}
+		}
+		/**
+		 * 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.validateHeadingLevel(this.headingLevel);
+			// Ensure the taskStatus is set initially based on the prop
+			this.validateTaskStatus(this.taskStatus);
+		}
+		render() {
+			const isLinkActive = this.link && !this.deactivateLink;
+			const taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;
+			const describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;
+			return h(
+				'li',
+				{
+					'key': 'b00f95cd8b17f1e40daae5a16e0198b80de392e6',
+					'class': `ontario-task ${taskStatusClass}`,
+					'role': 'group',
+					'aria-labelledby': `task-label--${this.taskId}`,
+					'data-task-status': this.taskStatusState,
+					'aria-describedby': describedBy,
+				},
+				isLinkActive
+					? h(
+							'a',
+							{ 'href': this.link, 'class': 'ontario-task__link', 'aria-label': this.label },
+							this.renderTaskContent(),
+						)
+					: h('div', null, this.renderTaskContent()),
+			);
+		}
+		get el() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				headingLevel: ['validateHeadingLevel'],
+				hintText: ['parseHintText'],
+				taskStatus: ['validateTaskStatus'],
+			};
+		}
+		static get style() {
+			return ontarioTaskCss;
+		}
+	},
+	[
+		257,
+		'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'],
+		],
+		{
+			headingLevel: ['validateHeadingLevel'],
+			hintText: ['parseHintText'],
+			taskStatus: ['validateTaskStatus'],
+		},
+	],
+);
+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;
+		}
+	});
+}
+defineCustomElement$1();
+
+const OntarioTask = OntarioTask$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { OntarioTask, defineCustomElement };
+//# sourceMappingURL=ontario-task.js.map
+
+//# sourceMappingURL=ontario-task.js.map

package/components/ontario-task.js.map

@@ -0,0 +1 @@
+{"file":"ontario-task.js","mappings":"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","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 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use 'pkg:@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(20) spacing.$spacing-0;\n\tlist-style: none;\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: space-between;\n\t\tgap: spacing.$spacing-4;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t\tjustify-content: flex-start;\n\t\t\tgap: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t.ontario-task__text {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\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: none;\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\t&--error {\n\t\tpadding-left: spacing.$spacing-4;\n\t\tborder-left: globalFunctions.px-to-rem(4) solid colours.$ontario-colour-alert;\n\t\tmargin-left: globalFunctions.px-to-rem(-2);\n\t}\n\n\t.ontario-hint {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-task:focus-within {\n\toutline: 4px solid colours.$ontario-colour-focus;\n}\n\n.ontario-task__link {\n\t.ontario-task__label {\n\t\ttext-decoration: underline;\n\t}\n}\n\n.ontario-task__link:focus {\n\toutline: none;\n\tbox-shadow: none;\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","import { h, Component, Prop, Watch, State, Listen, Element } 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';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.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\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 * Watch for changes in `taskStatus` prop to validate its value.\n\t */\n\t@Watch('taskStatus')\n\tvalidateTaskStatus(newValue: TaskStatuses) {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(newValue);\n\n\t\tif (isValidStatus) {\n\t\t\tthis.taskStatusState = newValue;\n\t\t} else {\n\t\t\t// If the status is invalid, log a warning and use the default\n\t\t\tthis.taskStatusState = this.warnAndGetDefaultTaskStatus();\n\t\t}\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 * 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 * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param {CustomEvent} - The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\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\telementId={`hint-text--${this.taskId}`}\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 * 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 * 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<div class=\"ontario-task__text\">\n\t\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t\t{this.renderHintText()}\n\t\t\t\t</div>\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\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\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.validateHeadingLevel(this.headingLevel);\n\n\t\t// Ensure the taskStatus is set initially based on the prop\n\t\tthis.validateTaskStatus(this.taskStatus);\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\t\tconst describedBy = this.internalHintText ? `hint-text--${this.taskId}` : undefined;\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\taria-describedby={describedBy}\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{this.renderTaskContent()}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{this.renderTaskContent()}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/ontario-textarea.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../dist/types/components';
+
+interface OntarioTextarea extends Components.OntarioTextarea, HTMLElement {}
+export const OntarioTextarea: {
+	prototype: OntarioTextarea;
+	new (): OntarioTextarea;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;