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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-aside.js","sourceRoot":"","sources":["../../../src/components/ontario-aside/ontario-aside.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\tconst message = new ConsoleMessageClass();\n\t\treturn message\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t.addRegularText('for')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContent` prop for validation purposes.\n\t *\n\t * If no `headingContent` value is provided, a warning message will be printed.\n\t */\n\t@Watch('headingContent')\n\tvalidateHeadingContent() {\n\t\tif (!this.headingContent) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingContent ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\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 `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingContent();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingType,\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-aside/test/ontario-aside.e2e.js

@@ -0,0 +1,50 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-aside', () => {
+	it('renders', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-aside></ontario-aside>');
+		const component = await page.find('ontario-aside');
+		const element = await page.find('ontario-aside >>> aside');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--teal']);
+	});
+	describe('render changes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent('<ontario-aside></ontario-aside>');
+			component = await page.find('ontario-aside');
+			element = await page.find('ontario-aside >>> aside');
+		});
+		it('renders changes to the headingType property', async () => {
+			component.setProperty('headingType', 'h3');
+			await page.waitForChanges();
+			expect(element.firstChild.nodeName).toBe('H3');
+			component.setProperty('headingType', 'h4');
+			await page.waitForChanges();
+			expect(element.firstChild.nodeName).toBe('H4');
+		});
+		it('renders changes to the class names when the highlightColor is changed', async () => {
+			component.setProperty('highlightColour', 'gold');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--gold']);
+			component.setProperty('highlightColour', 'lime');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--lime']);
+		});
+		it('renders changes to the HTML through the headingContentType property', async () => {
+			component.setProperty('headingContentType', 'string');
+			component.setProperty('headingContent', 'Quick fact:');
+			await page.waitForChanges();
+			const heading = await page.find('ontario-aside >>> h2');
+			expect(heading).toEqualHtml('<h2 class="ontario-aside__title ontario-h5">Quick fact:</h2>');
+			component.setProperty('headingContentType', 'html');
+			component.setProperty('headingContent', '<a href="#">Quick fact:</a>');
+			await page.waitForChanges();
+			expect(heading).toEqualHtml('<h2 class="ontario-aside__title ontario-h5"><a href="#">Quick fact:</a></h2>');
+		});
+	});
+});
+//# sourceMappingURL=ontario-aside.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-aside.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-aside/test/ontario-aside.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-aside', () => {\n\tit('renders', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-aside></ontario-aside>');\n\t\tconst component = await page.find('ontario-aside');\n\t\tconst element = await page.find('ontario-aside >>> aside');\n\n\t\texpect(component).toHaveClass('hydrated');\n\t\texpect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--teal']);\n\t});\n\n\tdescribe('render changes', () => {\n\t\tlet page: any;\n\t\tlet component: any;\n\t\tlet element: any;\n\n\t\tbeforeEach(async () => {\n\t\t\tpage = await newE2EPage();\n\t\t\tawait page.setContent('<ontario-aside></ontario-aside>');\n\t\t\tcomponent = await page.find('ontario-aside');\n\t\t\telement = await page.find('ontario-aside >>> aside');\n\t\t});\n\n\t\tit('renders changes to the headingType property', async () => {\n\t\t\tcomponent.setProperty('headingType', 'h3');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element.firstChild.nodeName).toBe('H3');\n\n\t\t\tcomponent.setProperty('headingType', 'h4');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element.firstChild.nodeName).toBe('H4');\n\t\t});\n\n\t\tit('renders changes to the class names when the highlightColor is changed', async () => {\n\t\t\tcomponent.setProperty('highlightColour', 'gold');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--gold']);\n\n\t\t\tcomponent.setProperty('highlightColour', 'lime');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(element).toHaveClasses(['ontario-aside', 'ontario-border-highlight--lime']);\n\t\t});\n\n\t\tit('renders changes to the HTML through the headingContentType property', async () => {\n\t\t\tcomponent.setProperty('headingContentType', 'string');\n\t\t\tcomponent.setProperty('headingContent', 'Quick fact:');\n\t\t\tawait page.waitForChanges();\n\n\t\t\tconst heading = await page.find('ontario-aside >>> h2');\n\n\t\t\texpect(heading).toEqualHtml('<h2 class=\"ontario-aside__title ontario-h5\">Quick fact:</h2>');\n\n\t\t\tcomponent.setProperty('headingContentType', 'html');\n\t\t\tcomponent.setProperty('headingContent', '<a href=\"#\">Quick fact:</a>');\n\t\t\tawait page.waitForChanges();\n\n\t\t\texpect(heading).toEqualHtml('<h2 class=\"ontario-aside__title ontario-h5\"><a href=\"#\">Quick fact:</a></h2>');\n\t\t});\n\t});\n});\n"]}

package/dist/collection/components/ontario-aside/test/ontario-aside.spec.js

@@ -0,0 +1,103 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioAside } from '../ontario-aside';
+describe('ontario-aside', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioAside],
+				html: `<ontario-aside heading-type="h3" heading-content-type="string" heading-content="Quick fact:" highlight-colour="gold">As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</ontario-aside>`,
+			});
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+	it('should render the h2 heading level if no headingType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content-type="string" heading-content="Quick fact:" highlight-colour="gold"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-content-type="string" heading-content="Quick fact:" highlight-colour="gold">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--gold">
+						<h2 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</h2>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+	it('should render the expected heading level when a headingType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-type="h5" heading-content-type="string" heading-content="Quick fact:"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-type="h5" heading-content-type="string" heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h5 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</h5>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+	it('should render a string heading if no headingContentType prop is passed', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content="Quick fact:"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h2 class="ontario-aside__title ontario-h5">
+							Quick fact:
+						</h2>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+	it('should render html in the heading content if the headingContentType prop is set to `html`', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,
+		});
+		expect(page.root).toEqualHtml(`
+			<ontario-aside heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>" heading-content="Quick fact:">
+				<mock:shadow-root>
+					<aside class="ontario-aside ontario-border-highlight--teal">
+						<h2 class="ontario-aside__title ontario-h5">
+							<a href="#">Quick fact:</a>
+						</h2>
+						<slot></slot>
+					</aside>
+				</mock:shadow-root>
+				<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>
+			</ontario-aside>
+		`);
+	});
+	it('should reflect attributes/props being set', async () => {
+		const page = await newSpecPage({
+			components: [OntarioAside],
+			html: `<ontario-aside heading-type="h4" heading-content-type="html" heading-content="<a href='#'>Quick fact:</a>" highlight-colour="purple" content="As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions."></ontario-aside>`,
+		});
+		expect(page.rootInstance.headingType).toBe('h4');
+		expect(page.rootInstance.headingContentType).toBe('html');
+		expect(page.rootInstance.headingContent).toBe("<a href='#'>Quick fact:</a>");
+		expect(page.rootInstance.highlightColour).toBe('purple');
+		expect(page.rootInstance.content).toBe(
+			'As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.',
+		);
+	});
+});
+//# sourceMappingURL=ontario-aside.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-aside.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-aside/test/ontario-aside.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;QACzB,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;YAChD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;gBAC1B,IAAI,EAAE,uQAAuQ;aAC7Q,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,qEAAqE,EAAE,KAAK,IAAI,EAAE;QACpF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,4PAA4P;SAClQ,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,4EAA4E,EAAE,KAAK,IAAI,EAAE;QAC3F,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,sPAAsP;SAC5P,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,wEAAwE,EAAE,KAAK,IAAI,EAAE;QACvF,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,sMAAsM;SAC5M,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2FAA2F,EAAE,KAAK,IAAI,EAAE;QAC1G,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,kPAAkP;SACxP,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;GAY7B,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;YAC9B,UAAU,EAAE,CAAC,YAAY,CAAC;YAC1B,IAAI,EAAE,kSAAkS;SACxS,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC1D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;QAC7E,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CACrC,kIAAkI,CAClI,CAAC;IACH,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioAside } from '../ontario-aside';\n\ndescribe('ontario-aside', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioAside],\n\t\t\t\thtml: `<ontario-aside heading-type=\"h3\" heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</ontario-aside>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tit('should render the h2 heading level if no headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"string\" heading-content=\"Quick fact:\" highlight-colour=\"gold\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--gold\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render the expected heading level when a headingType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-type=\"h5\" heading-content-type=\"string\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h5 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render a string heading if no headingContentType prop is passed', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content=\"Quick fact:\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\tQuick fact:\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should render html in the heading content if the headingContentType prop is set to `html`', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\"><p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.root).toEqualHtml(`\n\t\t\t<ontario-aside heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" heading-content=\"Quick fact:\">\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<aside class=\"ontario-aside ontario-border-highlight--teal\">\n\t\t\t\t\t\t<h2 class=\"ontario-aside__title ontario-h5\">\n\t\t\t\t\t\t\t<a href=\"#\">Quick fact:</a>\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</aside>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t<p>As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.</p>\n\t\t\t</ontario-aside>\n\t\t`);\n\t});\n\n\tit('should reflect attributes/props being set', async () => {\n\t\tconst page = await newSpecPage({\n\t\t\tcomponents: [OntarioAside],\n\t\t\thtml: `<ontario-aside heading-type=\"h4\" heading-content-type=\"html\" heading-content=\"<a href='#'>Quick fact:</a>\" highlight-colour=\"purple\" content=\"As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.\"></ontario-aside>`,\n\t\t});\n\n\t\texpect(page.rootInstance.headingType).toBe('h4');\n\t\texpect(page.rootInstance.headingContentType).toBe('html');\n\t\texpect(page.rootInstance.headingContent).toBe(\"<a href='#'>Quick fact:</a>\");\n\t\texpect(page.rootInstance.highlightColour).toBe('purple');\n\t\texpect(page.rootInstance.content).toBe(\n\t\t\t'As of 2013, Canada is responsible for 1.6% of global emissions, with Ontario responsible for less than 0.4% of global emissions.',\n\t\t);\n\t});\n});\n"]}

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.css

@@ -0,0 +1,140 @@
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global colour variables
+*
+*  1 - Greyscale colours
+*  2 - System colours
+*  3 - Accent colours
+*    3.1 - Main
+*    3.2 - Light
+*    3.3 - Dark
+*    3.4 - Callout backgrounds
+*/
+/*** 1 - Greyscale colours ***/
+/*** 2 - System colours ***/
+/*** 3 - Accent colours ***/
+/* Main */
+/* Light */
+/* Dark */
+/* callout backgrounds */
+/* icon colours */
+/* service ontario header colours */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.ontario-back-to-top,
+.ontario-back-to-top--default {
+	position: fixed;
+	bottom: 5%;
+	right: 2%;
+	visibility: hidden;
+	opacity: 0;
+	transition: 0.1s ease-in-out;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 3rem;
+	padding: 0.5rem 1rem 0.5rem 0.75rem;
+	background: #e6e6e6;
+	border: 0.125rem solid #ffffff;
+	border-radius: 4px;
+	box-shadow: 0 0.125rem 0.25rem rgba(26, 26, 26, 0.6);
+	box-sizing: border-box;
+	color: #1a1a1a;
+	line-height: 1.25rem;
+	font-size: 1rem;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-weight: 600;
+	z-index: 10000;
+	cursor: pointer;
+}
+.ontario-back-to-top .ontario-icon,
+.ontario-back-to-top--default .ontario-icon {
+	margin: 0.125rem 0.5rem 0 0;
+	width: 2rem;
+	height: 2rem;
+}
+.ontario-back-to-top:hover,
+.ontario-back-to-top--default:hover {
+	background-color: #cccccc;
+}
+.ontario-back-to-top:focus,
+.ontario-back-to-top--default:focus {
+	background-color: #e6e6e6;
+	box-shadow: 0 0 0 0.25rem #009adb, 0 0.1875rem 0.3125rem 0.1875rem rgba(0, 0, 0, 0.6);
+	outline: 0.25rem solid transparent;
+	transition: 0.1s ease-in-out;
+}
+.ontario-back-to-top:active,
+.ontario-back-to-top--default:active {
+	background-color: #b2b2b2;
+	box-shadow: 0 0 0 0.25rem #009adb, 0 0.3125rem 0.4375rem 0.1875rem rgba(0, 0, 0, 0.6);
+	outline: 0.25rem solid transparent;
+	transition: background-color 0s, box-shadow 0.1s ease-in-out;
+}
+@media screen and (max-width: 73em) {
+	.ontario-back-to-top,
+	.ontario-back-to-top--default {
+		flex-direction: column;
+		height: 4.75rem;
+		padding: 0.375rem 0.75rem 0.5625rem 0.75rem;
+	}
+	.ontario-back-to-top .ontario-icon,
+	.ontario-back-to-top--default .ontario-icon {
+		margin: 0.0625rem 0 0.25rem 0;
+		width: 2rem;
+		height: 2rem;
+	}
+}
+@media screen and (max-width: 40em) {
+	.ontario-back-to-top,
+	.ontario-back-to-top--default {
+		display: block;
+		padding: 0.25rem;
+		font-size: 0;
+		width: 3rem;
+		height: 3rem;
+	}
+	.ontario-back-to-top .ontario-icon,
+	.ontario-back-to-top--default .ontario-icon {
+		margin: 0.5rem 0 0 0;
+	}
+	@-moz-document url-prefix() {
+		.ontario-back-to-top .ontario-icon,
+		.ontario-back-to-top--default .ontario-icon {
+			margin-top: 0.125rem;
+		}
+	}
+}
+.ontario-back-to-top.active,
+.ontario-back-to-top--default.active {
+	visibility: visible;
+	opacity: 1;
+}

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.js

@@ -0,0 +1,134 @@
+import { h } from '@stencil/core';
+import OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';
+import { validateLanguage } from '../../utils/validation/validation-functions';
+import translations from '../../translations/global.i18n.json';
+export class OntarioBackToTop {
+	constructor() {
+		this.language = undefined;
+		this.translations = translations;
+		this.displayBackToTop = false;
+		this.scrollYValue = 200;
+	}
+	/**
+	 * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.
+	 */
+	showBackToTopButton() {
+		this.displayBackToTop = window.scrollY > this.scrollYValue;
+	}
+	/**
+	 * 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);
+	}
+	/**
+	 * Scroll to top functionality when the Back to Top button is clicked
+	 */
+	scrollToTop() {
+		window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
+	}
+	componentWillLoad() {
+		this.language = validateLanguage(this.language);
+	}
+	render() {
+		return h(
+			'button',
+			{
+				'key': '28f085a23b68bb74b8874d03c900775fe5868ae7',
+				'class': this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`,
+				'onClick': this.scrollToTop,
+				'aria-label': this.translations.backToTop.ariaLabel[`${this.language}`],
+			},
+			h('span', {
+				'key': '8f88357f7064378065119f52bfc7a081318094da',
+				'aria-hidden': 'true',
+				'innerHTML': OntarioIconArrowUp,
+			}),
+			this.translations.backToTop.top[`${this.language}`],
+		);
+	}
+	static get is() {
+		return 'ontario-back-to-top';
+	}
+	static get encapsulation() {
+		return 'shadow';
+	}
+	static get originalStyleUrls() {
+		return {
+			$: ['ontario-back-to-top.scss'],
+		};
+	}
+	static get styleUrls() {
+		return {
+			$: ['ontario-back-to-top.css'],
+		};
+	}
+	static get properties() {
+		return {
+			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 prop is passed, it will default to English.',
+				},
+				attribute: 'language',
+				reflect: false,
+			},
+		};
+	}
+	static get states() {
+		return {
+			translations: {},
+			displayBackToTop: {},
+			scrollYValue: {},
+		};
+	}
+	static get elementRef() {
+		return 'element';
+	}
+	static get listeners() {
+		return [
+			{
+				name: 'scroll',
+				method: 'showBackToTopButton',
+				target: 'window',
+				capture: false,
+				passive: true,
+			},
+			{
+				name: 'setAppLanguage',
+				method: 'handleSetAppLanguage',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+			{
+				name: 'headerLanguageToggled',
+				method: 'handleHeaderLanguageToggled',
+				target: 'window',
+				capture: false,
+				passive: false,
+			},
+		];
+	}
+}
+//# sourceMappingURL=ontario-back-to-top.js.map

package/dist/collection/components/ontario-back-to-top/ontario-back-to-top.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-back-to-top.js","sourceRoot":"","sources":["../../../src/components/ontario-back-to-top/ontario-back-to-top.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,kBAAkB,MAAM,kDAAkD,CAAC;AAElF,OAAO,EAAE,gBAAgB,EAAE,MAAM,6CAA6C,CAAC;AAE/E,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAO/D,MAAM,OAAO,gBAAgB;;;4BASC,YAAY;gCAEI,KAAK;4BAEV,GAAG;;IAE3C;;OAEG;IAEH,mBAAmB;QAClB,IAAI,CAAC,gBAAgB,GAAG,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC;IAC5D,CAAC;IAED;;OAEG;IAEH,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACpB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;QACzC,CAAC;IACF,CAAC;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED;;OAEG;IACK,WAAW;QAClB,MAAM,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC1D,CAAC;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,CAAC;IAED,MAAM;QACL,OAAO,CACN,+DACC,KAAK,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,qBAAqB,EACnF,OAAO,EAAE,IAAI,CAAC,WAAW,gBACb,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;YAErE,4EAAkB,MAAM,EAAC,SAAS,EAAE,kBAAkB,GAAS;YAC9D,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAC5C,CACT,CAAC;IACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\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 prop 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@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/**\n\t * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t */\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t}\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 * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n"]}

package/dist/collection/components/ontario-back-to-top/test/mock-page-content.js

@@ -0,0 +1,26 @@
+export const mockBTTContent = `
+        <main>
+            <div class="ontario-row">
+                <div class="ontario-columns ontario-small-12">
+                    <h1>Back To Top component test page content</h1>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+
+                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>
+                    
+                    <ontario-back-to-top><ontario-back-to-top>
+                </div>
+            </div>
+        </main>
+`;
+//# sourceMappingURL=mock-page-content.js.map

package/dist/collection/components/ontario-back-to-top/test/mock-page-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mock-page-content.js","sourceRoot":"","sources":["../../../../src/components/ontario-back-to-top/test/mock-page-content.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;CAwB7B,CAAC","sourcesContent":["export const mockBTTContent = `\n        <main>\n            <div class=\"ontario-row\">\n                <div class=\"ontario-columns ontario-small-12\">\n                    <h1>Back To Top component test page content</h1>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n\n                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident ipsa rem ipsam ducimus, vel mollitia unde tempore delectus tenetur perspiciatis itaque doloribus. Consectetur odit minus error fugit est quisquam amet quam iste quibusdam, consequatur sapiente nesciunt, dolore minima ducimus ipsa vitae, temporibus delectus culpa. Dolorem animi fuga tenetur molestias officia iste earum atque culpa doloremque assumenda expedita explicabo, architecto sapiente! Repudiandae officia maxime, cumque ducimus facilis harum quia labore modi atque? Explicabo quam asperiores voluptas, doloremque cupiditate aut qui, excepturi magnam dolore accusantium maxime corporis, itaque a fugiat praesentium voluptates sapiente nemo. At corrupti laudantium quam beatae, ipsum ad assumenda dignissimos libero facere! Porro, nostrum eos. Voluptate nesciunt culpa quidem rerum veniam, obcaecati dolorem, rem perferendis delectus ducimus, itaque sequi impedit! Illo rerum eveniet reprehenderit, ullam temporibus sequi maxime quibusdam magni quaerat aliquam enim debitis, fuga molestiae facilis in totam ducimus laboriosam fugit voluptatum. Amet laudantium sint voluptate tempora laboriosam delectus quos vero quis. Iste eos totam, dicta tempore quos, commodi at neque delectus fugit voluptate facere quaerat perferendis assumenda libero sapiente fugiat vero aliquam alias modi illum ipsum. Fuga nesciunt qui sunt tempore sint modi nulla doloribus sapiente maxime quis iusto, voluptatibus perferendis expedita laborum deleniti beatae! Aperiam consequuntur unde hic impedit repellendus reiciendis modi laborum, error deleniti aliquam totam perspiciatis. Neque, eaque obcaecati cupiditate sequi nisi porro culpa corporis in eveniet eius repellendus unde, sapiente adipisci accusamus aspernatur dolorum? Nostrum reprehenderit adipisci necessitatibus obcaecati et debitis beatae in sint sequi velit explicabo vero esse, optio ex quisquam iste. Quisquam dolores assumenda laboriosam reiciendis, commodi perferendis magnam! Quae ex blanditiis commodi quam optio expedita quod quia natus odit. Dolore nam quidem sint consectetur laboriosam architecto repudiandae deserunt animi, id praesentium, excepturi voluptates earum harum eligendi minima, odio asperiores beatae ipsum ut? Perferendis, animi? Voluptate eveniet ad repudiandae tempora est.</p>\n                    \n                    <ontario-back-to-top><ontario-back-to-top>\n                </div>\n            </div>\n        </main>\n`;\n"]}