@ongov/ontario-design-system-component-library 4.2.0-alpha.1

package/dist/collection/components/ontario-loading-indicator/ontario-loading-indicator.js

@@ -0,0 +1,258 @@
+import { h } from '@stencil/core';
+import { validateLanguage } from '../../utils/validation/validation-functions';
+import { validateValueAgainstArray } from '../../utils/validation/validation-functions';
+import { ConsoleMessageClass } from '../../utils/console-message/console-message';
+import translations from '../../translations/global.i18n.json';
+export class OntarioLoadingIndicator {
+	constructor() {
+		this.type = 'large';
+		this.isLoading = false;
+		this.message = undefined;
+		this.fullScreenOverlay = true;
+		this.language = undefined;
+		this.translations = translations;
+		this.isLoadingState = undefined;
+		this.typeState = undefined;
+	}
+	/**
+	 * 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 input component loads.
+	 */
+	handleSetAppLanguage(event) {
+		if (!this.language) {
+			this.language = validateLanguage(event);
+		}
+	}
+	handleHeaderLanguageToggled(event) {
+		this.language = validateLanguage(event);
+	}
+	/**
+	 * Watch for changes in the `isLoading` prop.
+	 */
+	isLoadingChanged(newIsLoading) {
+		this.isLoadingState = newIsLoading;
+	}
+	/**
+	 * Watch for changes in the `type` variable for validation purposes.
+	 *
+	 * If the user input doesn't match one of the array values then `type` will be set to its default (`large`).
+	 * If a match is found in one of the array values then `type` will be set to the matching array key value.
+	 */
+	validateType() {
+		const isValid = validateValueAgainstArray(this.type, ['large', 'small']);
+		if (isValid) {
+			return (this.typeState = this.type);
+		} else {
+			this.warnDefaultType();
+			return (this.typeState = 'large');
+		}
+	}
+	/**
+	 * Print the invalid `type` warning message.
+	 * @returns default type ('large')
+	 */
+	warnDefaultType() {
+		const message = new ConsoleMessageClass();
+		message
+			.addDesignSystemTag()
+			.addMonospaceText(' type ')
+			.addRegularText('on')
+			.addMonospaceText(' <ontario-loading-indicator> ')
+			.addRegularText('was set to an invalid type; only')
+			.addMonospaceText(' large or small ')
+			.addRegularText('are supported. The default type')
+			.addMonospaceText(' large ')
+			.addRegularText('is assumed.')
+			.printMessage();
+	}
+	componentWillLoad() {
+		this.language = validateLanguage(this.language);
+		this.validateType();
+		this.isLoadingState = this.isLoading;
+	}
+	render() {
+		var _a;
+		return this.typeState === 'large'
+			? h(
+					'div',
+					{
+						'class': this.fullScreenOverlay
+							? `ontario-loading-indicator__overlay`
+							: `ontario-loading-indicator__overlay--within-container`,
+						'aria-hidden': this.isLoadingState ? 'false' : 'true',
+						'role': 'alert',
+						'aria-live': 'assertive',
+					},
+					h(
+						'div',
+						{ class: 'ontario-loading-indicator' },
+						h(
+							'svg',
+							{
+								class: 'ontario-loading-indicator__spinner',
+								viewBox: '25 25 50 50',
+								xmlns: 'http://www.w3.org/2000/svg',
+							},
+							h('circle', { 'cx': '50', 'cy': '50', 'r': '20', 'fill': 'none', 'stroke-width': '4' }),
+						),
+						h(
+							'p',
+							null,
+							(_a = this.message) !== null && _a !== void 0 ? _a : this.translations.loading[`${this.language}`],
+						),
+					),
+			  )
+			: h('p', null, 'The small loading indicator is still under development.');
+	}
+	static get is() {
+		return 'ontario-loading-indicator';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-loading-indicator.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-loading-indicator.css'],
+		};
+	}
+	static get properties() {
+		return {
+			type: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: "'small' | 'large'",
+					resolved: '"large" | "small"',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'The type of loading indicator to render.',
+				},
+				attribute: 'type',
+				reflect: false,
+				defaultValue: "'large'",
+			},
+			isLoading: {
+				type: 'boolean',
+				mutable: false,
+				complexType: {
+					original: 'boolean',
+					resolved: 'boolean',
+					references: {},
+				},
+				required: false,
+				optional: false,
+				docs: {
+					tags: [],
+					text: 'A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.',
+				},
+				attribute: 'is-loading',
+				reflect: false,
+				defaultValue: 'false',
+			},
+			message: {
+				type: 'string',
+				mutable: false,
+				complexType: {
+					original: 'string',
+					resolved: 'string | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'The message that tells the user what is happening or why the user is waiting.\nIf no message prop is passed, it will default to "Loading". Translations for this default message are included.\n\nThis is optional.',
+				},
+				attribute: 'message',
+				reflect: false,
+			},
+			fullScreenOverlay: {
+				type: 'boolean',
+				mutable: false,
+				complexType: {
+					original: 'boolean',
+					resolved: 'boolean | undefined',
+					references: {},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\nIf set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.',
+				},
+				attribute: 'full-screen-overlay',
+				reflect: false,
+				defaultValue: 'true',
+			},
+			language: {
+				type: 'string',
+				mutable: true,
+				complexType: {
+					original: 'Language',
+					resolved: '"en" | "fr" | undefined',
+					references: {
+						Language: {
+							location: 'import',
+							path: '../../utils/common/language-types',
+							id: 'src/utils/common/language-types.ts::Language',
+						},
+					},
+				},
+				required: false,
+				optional: true,
+				docs: {
+					tags: [],
+					text: 'The language of the component.\nThis is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.',
+				},
+				attribute: 'language',
+				reflect: false,
+			},
+		};
+	}
+	static get states() {
+		return {
+			translations: {},
+			isLoadingState: {},
+			typeState: {},
+		};
+	}
+	static get watchers() {
+		return [
+			{
+				propName: 'isLoading',
+				methodName: 'isLoadingChanged',
+			},
+			{
+				propName: 'type',
+				methodName: 'validateType',
+			},
+		];
+	}
+	static get listeners() {
+		return [
+			{
+				name: 'setAppLanguage',
+				method: 'handleSetAppLanguage',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'headerLanguageToggled',
+				method: 'handleHeaderLanguageToggled',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-loading-indicator.js.map

package/dist/collection/components/ontario-loading-indicator/ontario-loading-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-loading-indicator.js","sourceRoot":"","sources":["../../../src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/**\n\t * The type of loading indicator to render.\n\t */\n\t@Prop() type: 'small' | 'large' = 'large';\n\n\t/**\n\t * A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t */\n\t@Prop() isLoading: boolean = false;\n\n\t/**\n\t * The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() message?: string;\n\n\t/**\n\t * A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t *\n\t * If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t */\n\t@Prop() fullScreenOverlay?: boolean = true;\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@State() translations: any = translations;\n\n\t/**\n\t * Mutable variables, for internal use only.\n\t */\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' | 'large';\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 input 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 in the `isLoading` prop.\n\t */\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/**\n\t * Watch for changes in the `type` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t */\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-loading-indicator/test/ontario-loading-indicator.e2e.js

@@ -0,0 +1,59 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-loading-indicator', () => {
+	it('should be hidden on page load', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		const styles = await element.getComputedStyle();
+		const ariaHiddenValue = element.getAttribute('aria-hidden');
+		expect(styles.display).toBe('none');
+		expect(ariaHiddenValue).toBe('true');
+	});
+	it('should be visible when the `isLoading` prop is set to true', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-loading-indicator is-loading="true"></ontario-loading-indicator>');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		const styles = await element.getComputedStyle();
+		const ariaHiddenValue = element.getAttribute('aria-hidden');
+		expect(styles.display).toBe('block');
+		expect(ariaHiddenValue).toBe('false');
+	});
+	it('should have a `fullScreenOverlay` value of true when none is explicitly set', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-loading-indicator is-loading="true"></ontario-loading-indicator>');
+		const component = await page.find('ontario-loading-indicator');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		const styles = await element.getComputedStyle();
+		const fullScreenValue = await component.getProperty('fullScreenOverlay');
+		expect(fullScreenValue).toBe(true);
+		expect(styles.position).toBe('fixed');
+	});
+	it('should update the overlay styles and value with the `fullScreenOverlay` prop is set to false', async () => {
+		const page = await newE2EPage();
+		await page.setContent(
+			'<ontario-loading-indicator is-loading="true" full-screen-overlay="false"></ontario-loading-indicator>',
+		);
+		const component = await page.find('ontario-loading-indicator');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		const styles = await element.getComputedStyle();
+		const fullScreenValue = await component.getProperty('fullScreenOverlay');
+		expect(fullScreenValue).toBe(false);
+		expect(styles.position).toBe('absolute');
+	});
+	it('should render the default "Loading" content when no `message` prop is passed', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		expect(element.textContent).toEqual('Loading');
+	});
+	it('should update the content when the `message` prop is updated', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');
+		const component = await page.find('ontario-loading-indicator');
+		const element = await page.find('ontario-loading-indicator >>> div');
+		component.setAttribute('message', 'Data incoming...');
+		await page.waitForChanges();
+		expect(element.textContent).toEqual('Data incoming...');
+	});
+});
+//# sourceMappingURL=ontario-loading-indicator.e2e.js.map

package/dist/collection/components/ontario-loading-indicator/test/ontario-loading-indicator.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-loading-indicator.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-loading-indicator/test/ontario-loading-indicator.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-loading-indicator', () => {\n\tit('should be hidden on page load', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\tconst styles = await element.getComputedStyle();\n\t\tconst ariaHiddenValue = element.getAttribute('aria-hidden');\n\n\t\texpect(styles.display).toBe('none');\n\t\texpect(ariaHiddenValue).toBe('true');\n\t});\n\n\tit('should be visible when the `isLoading` prop is set to true', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-loading-indicator is-loading=\"true\"></ontario-loading-indicator>');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\tconst styles = await element.getComputedStyle();\n\t\tconst ariaHiddenValue = element.getAttribute('aria-hidden');\n\n\t\texpect(styles.display).toBe('block');\n\t\texpect(ariaHiddenValue).toBe('false');\n\t});\n\n\tit('should have a `fullScreenOverlay` value of true when none is explicitly set', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-loading-indicator is-loading=\"true\"></ontario-loading-indicator>');\n\t\tconst component = await page.find('ontario-loading-indicator');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\tconst styles = await element.getComputedStyle();\n\t\tconst fullScreenValue = await component.getProperty('fullScreenOverlay');\n\n\t\texpect(fullScreenValue).toBe(true);\n\t\texpect(styles.position).toBe('fixed');\n\t});\n\n\tit('should update the overlay styles and value with the `fullScreenOverlay` prop is set to false', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(\n\t\t\t'<ontario-loading-indicator is-loading=\"true\" full-screen-overlay=\"false\"></ontario-loading-indicator>',\n\t\t);\n\t\tconst component = await page.find('ontario-loading-indicator');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\tconst styles = await element.getComputedStyle();\n\t\tconst fullScreenValue = await component.getProperty('fullScreenOverlay');\n\n\t\texpect(fullScreenValue).toBe(false);\n\t\texpect(styles.position).toBe('absolute');\n\t});\n\n\tit('should render the default \"Loading\" content when no `message` prop is passed', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\texpect(element.textContent).toEqual('Loading');\n\t});\n\n\tit('should update the content when the `message` prop is updated', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-loading-indicator></ontario-loading-indicator>');\n\t\tconst component = await page.find('ontario-loading-indicator');\n\t\tconst element = await page.find('ontario-loading-indicator >>> div');\n\n\t\tcomponent.setAttribute('message', 'Data incoming...');\n\t\tawait page.waitForChanges();\n\n\t\texpect(element.textContent).toEqual('Data incoming...');\n\t});\n});\n"]}

package/dist/collection/components/ontario-loading-indicator/test/ontario-loading-indicator.spec.js

@@ -0,0 +1,32 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioLoadingIndicator } from '../ontario-loading-indicator';
+describe('ontario-loading-indicator', () => {
+	it('should render the expected html', async () => {
+		const page = await newSpecPage({
+			components: [OntarioLoadingIndicator],
+			html: `<ontario-loading-indicator></ontario-loading-indicator>`,
+		});
+		expect(page.root).toMatchSnapshot();
+	});
+	it('renders', async () => {
+		const page = await newSpecPage({
+			components: [OntarioLoadingIndicator],
+			html: `<ontario-loading-indicator></ontario-loading-indicator>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-loading-indicator>
+				<mock:shadow-root>
+					<div aria-hidden="true" aria-live="assertive" class="ontario-loading-indicator__overlay" role="alert">
+						<div class="ontario-loading-indicator">
+							<svg class="ontario-loading-indicator__spinner" viewBox="25 25 50 50" xmlns="http://www.w3.org/2000/svg">
+								<circle cx="50" cy="50" fill="none" r="20" stroke-width="4"></circle>
+							</svg>
+							<p>Loading</p>
+						</div>
+					</div>
+				</mock:shadow-root>
+			</ontario-loading-indicator>
+		`);
+	});
+});
+//# sourceMappingURL=ontario-loading-indicator.spec.js.map

package/dist/collection/components/ontario-loading-indicator/test/ontario-loading-indicator.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-loading-indicator.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-loading-indicator/test/ontario-loading-indicator.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAC;AAEvE,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IAC1C,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,uBAAuB,CAAC;YACrC,IAAI,EAAE,yDAAyD;SAC/D,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,SAAS,EAAE,KAAK,IAAI,EAAE;QACxB,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,uBAAuB,CAAC;YACrC,IAAI,EAAE,yDAAyD;SAC/D,CAAC,CAAC;QACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;GAa7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioLoadingIndicator } from '../ontario-loading-indicator';\n\ndescribe('ontario-loading-indicator', () => {\n\tit('should render the expected html', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLoadingIndicator],\n\t\t\thtml: `<ontario-loading-indicator></ontario-loading-indicator>`,\n\t\t});\n\n\t\texpect(page.root).toMatchSnapshot();\n\t});\n\n\tit('renders', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioLoadingIndicator],\n\t\t\thtml: `<ontario-loading-indicator></ontario-loading-indicator>`,\n\t\t});\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-loading-indicator>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div aria-hidden=\"true\" aria-live=\"assertive\" class=\"ontario-loading-indicator__overlay\" role=\"alert\">\n\t\t\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" fill=\"none\" r=\"20\" stroke-width=\"4\"></circle>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<p>Loading</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t</ontario-loading-indicator>\n\t\t`);\n\t});\n});\n"]}