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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-input.js","sourceRoot":"","sources":["../../../src/components/ontario-input/ontario-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, h, Prop, State, Listen, Element, Watch, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Input } from '../../utils/common/input/input';\nimport { TextInput } from './input.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage, validatePropExists } from '../../utils/validation/validation-functions';\nimport { translations as globalTranslations, Translations } from '../../translations';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\n\n@Component({\n\ttag: 'ontario-input',\n\tstyleUrl: 'ontario-input.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioInput implements TextInput {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"captionText\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-input>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The unique identifier of the input. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * The width of the input field. If no value is assigned, it will present as the `default` input width.\n\t */\n\t@Prop({ mutable: true }) inputWidth:\n\t\t| '2-char-width'\n\t\t| '3-char-width'\n\t\t| '4-char-width'\n\t\t| '5-char-width'\n\t\t| '7-char-width'\n\t\t| '10-char-width'\n\t\t| '20-char-width'\n\t\t| 'default' = 'default';\n\n\t/**\n\t * The name assigned to the input. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the input.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * This is used to determine whether the input is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t *\n\t * _Please add a validation messaging using `requiredValidationMessage` if setting this property._\n\t *\n\t * @example\n\t * <ontario-input\n\t *\t\tid=\"address-line-1\"\n\t *\t\tcaption=\"Address line 1\"\n\t *\t\trequired\n\t *\t\trequired-validation-message=\"Please enter an address, including street number and street name\"\n\t *\t\tname=\"address-line-1\"\n\t *\t\thint-text=\"Street and number or P.O. box.\"\n\t *\t></ontario-input>\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The input type value.\n\t *\n\t * If no `type` is provided, it will default to 'text'.\n\t */\n\t@Prop({ mutable: true }) type: 'text' | 'tel' | 'email' | 'password' = 'text';\n\n\t/**\n\t * The input content value.\n\t *\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Set this to display an\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the input component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-input\n\t *   caption='{\n\t *     \"caption\": \"Address\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   hint-expander='{\n\t *    \"hint\": \"Hint expander\",\n\t *    \"content\": \"This is the content\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-input>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * Used for the `aria-describedby` value of the input. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | undefined;\n\n\t/**\n\t * Enable live validation on the input.  Custom live validation can be performed using an `inputValidator`\n\t * validation function.  It will also validate the `required` state if no errors are returned from\n\t * the `inputValidator`.  Please set a `requiredValidationMessage` to report concisely to the end user what\n\t * they are required to set.\n\t */\n\t@Prop() enableLiveValidation: boolean = false;\n\n\t/**\n\t * Validate the validity of the input value `onBlur`.  This `async` function should return a result\n\t * to trigger an error message.  Returning `undefined` or `null` will clear it.\n\t */\n\t@Prop() inputValidator?: (value?: string) => Promise<{ errorMessage?: string } | null | undefined>;\n\n\t/**\n\t * Used to add a custom function to the input onInput event.\n\t */\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Custom error message to display if a required field is not filled out.  _Please add a\n\t * custom message when setting an input as required_.\n\t */\n\t@Prop() requiredValidationMessage: string;\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * Track if the input has been interacted with, used to validate if\n\t * a `required` field is in error.\n\t */\n\t@State() private hasBeenInteractedWith: boolean = false;\n\n\t/**\n\t * Global translations for accessing built-in translations\n\t */\n\t@State() private translations: Translations = globalTranslations;\n\n\t/**\n\t * Emitted when a input  occurs when an input has been changed.\n\t */\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ inputId: string; errorMessage: string }>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t * @param event The language that has been selected.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Handles an update to the language should the user request a language update from the language toggle.\n\t * @param event The language that has been selected.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<HeaderLanguageToggleEventDetails>) {\n\t\tthis.language = validateLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Handle the change in the `value` property and validate if the input has been interacted with by\n\t * the user to aid in determining if the required state should produce an error.\n\t */\n\t@Watch('value')\n\thandleValueChange() {\n\t\tthis.hasBeenInteractedWith = this.hasBeenInteractedWith || !!this.value;\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-input> ')\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 `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\tthis.translations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes in the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/**\n\t * Handle the component being blurred and perform validation logic on the input.  Custom validation\n\t * takes persistance, followed by validating the required state.\n\t *\n\t * Finally, an event is emitted to notify anything listening for the `inputErrorOccurred` that\n\t * an error occurred.\n\t */\n\t@Listen('blur', { capture: true })\n\tasync handleComponentBlur() {\n\t\tif (this.enableLiveValidation) {\n\t\t\t// Call inputValidator function to perform custom validation\n\t\t\tconst validationResult = this.inputValidator && this.inputValidator(this.value);\n\t\t\tawait validationResult?.then((x) => (this.errorMessage = x?.errorMessage));\n\n\t\t\t// Validate the `required` field\n\t\t\t// Only report a required error if no other error message is reported via validation\n\t\t\tif (this.required && this.hasBeenInteractedWith && !validationResult)\n\t\t\t\tif (!this.value)\n\t\t\t\t\tthis.errorMessage =\n\t\t\t\t\t\tthis.requiredValidationMessage || this.translations.input.requiredFieldError[this.getComponentLanguage()];\n\t\t\t\telse this.errorMessage = undefined;\n\t\t}\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ inputId: this.getId(), errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle input events and the information pertaining to the input to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Update the component value to match the value of the input element.\n\t\tthis.value = input?.value;\n\n\t\tthis.internals?.setFormValue?.(this.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\t// A UUID is assigned in `componentWillLoad` if there is no given `elementId`.\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\tprivate getClass(): string {\n\t\tif (this.hintExpander) {\n\t\t\treturn this.inputWidth === 'default'\n\t\t\t\t? `ontario-input ontario-input-hint-expander--true`\n\t\t\t\t: `ontario-input ontario-input--${this.inputWidth} ontario-input-hint-expander--true`;\n\t\t} else {\n\t\t\treturn this.inputWidth === 'default' ? `ontario-input` : `ontario-input ontario-input--${this.inputWidth}`;\n\t\t}\n\t}\n\n\tprivate getComponentLanguage() {\n\t\treturn this.language ?? 'en';\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the input `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-input--error' : ''}`}>\n\t\t\t\t{this.captionState.getCaption(this.getId(), !!this.internalHintExpander)}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t<Input\n\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\tclassName={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\ttype={this.type}\n\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t></Input>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n"]}

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

@@ -0,0 +1,141 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-input', () => {
+	describe('render', () => {
+		it('renders', async () => {
+			const page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			const component = await page.find('ontario-input');
+			const element = await page.find('ontario-input >>> input');
+			expect(component).toHaveClass('hydrated');
+			expect(element).toHaveClass('ontario-input');
+			expect(element).toEqualAttributes({
+				name: 'ontario-input',
+			});
+		});
+	});
+	describe('render changes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			component = await page.find('ontario-input');
+			element = await page.find('ontario-input >>> input');
+		});
+		it('renders changes to the id property', async () => {
+			component.setProperty('elementId', 'ontario-input-id');
+			await page.waitForChanges();
+			expect(element).toEqualAttributes({
+				name: 'ontario-input',
+				type: 'text',
+				id: 'ontario-input-id',
+			});
+		});
+		it('renders changes to the type property', async () => {
+			component.setProperty('type', 'tel');
+			await page.waitForChanges();
+			expect(element).toEqualAttributes({
+				name: 'ontario-input',
+				type: 'tel',
+			});
+		});
+		it('renders changes to the value attribute', async () => {
+			component.setAttribute('value', 'This is a test');
+			await page.waitForChanges();
+			const value = component.getAttribute('value');
+			expect(value).toEqual('This is a test');
+		});
+	});
+	describe('render CSS classes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			component = await page.find('ontario-input');
+			element = await page.find('ontario-input >>> input');
+		});
+		it('should render the 2-char-width class when the inputWidth prop is two characters', async () => {
+			component.setProperty('inputWidth', '2-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--2-char-width']);
+		});
+		it('should render the 3-char-width class when the inputWidth prop is three characters', async () => {
+			component.setProperty('inputWidth', '3-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--3-char-width']);
+		});
+		it('should render the 4-char-width class when the inputWidth prop is four characters', async () => {
+			component.setProperty('inputWidth', '4-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--4-char-width']);
+		});
+		it('should render the 5-char-width class when the inputWidth prop is five characters', async () => {
+			component.setProperty('inputWidth', '5-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--5-char-width']);
+		});
+		it('should render the 7-char-width class when the inputWidth prop is seven characters', async () => {
+			component.setProperty('inputWidth', '7-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--7-char-width']);
+		});
+		it('should render the 10-char-width class when the inputWidth prop is ten characters', async () => {
+			component.setProperty('inputWidth', '10-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--10-char-width']);
+		});
+		it('should render the 20-char-width class when the inputWidth prop is twenty characters', async () => {
+			component.setProperty('inputWidth', '20-char-width');
+			await page.waitForChanges();
+			expect(element).toHaveClasses(['ontario-input', 'ontario-input--20-char-width']);
+		});
+		it('should render only the `ontario-input` class when no inputWidth prop is defined', async () => {
+			await page.waitForChanges();
+			expect(element).toHaveClass('ontario-input');
+		});
+	});
+	describe('events/methods', () => {
+		it('fires the onBlur event', async () => {
+			const page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			const blurEvent = await page.spyOnEvent('inputOnBlur');
+			const component = await page.find('ontario-input');
+			component.triggerEvent('inputOnBlur');
+			await page.waitForChanges();
+			expect(blurEvent).toHaveReceivedEventTimes(1);
+		});
+		it('fires the onFocus event', async () => {
+			const page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			const focusEvent = await page.spyOnEvent('inputOnFocus');
+			const component = await page.find('ontario-input');
+			component.triggerEvent('inputOnFocus');
+			await page.waitForChanges();
+			expect(focusEvent).toHaveReceivedEventTimes(1);
+		});
+		it('fires the onChange event', async () => {
+			const page = await newE2EPage();
+			await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+			const changeEvent = await page.spyOnEvent('inputOnChange');
+			const component = await page.find('ontario-input');
+			component.triggerEvent('inputOnChange');
+			await page.waitForChanges();
+			expect(changeEvent).toHaveReceivedEventTimes(1);
+		});
+	});
+});
+describe('events', () => {
+	it('fires the onChange event', async () => {
+		const page = await newE2EPage();
+		await page.setContent("<ontario-input name='ontario-input'></ontario-input>");
+		const changeEvent = await page.spyOnEvent('change');
+		const component = await page.find('ontario-input');
+		component.triggerEvent('change');
+		await page.waitForChanges();
+		expect(changeEvent).toHaveReceivedEventTimes(1);
+	});
+});
+//# sourceMappingURL=ontario-input.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-input.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-input/test/ontario-input.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-input', () => {\n\tdescribe('render', () => {\n\t\tit('renders', async () => {\n\t\t\tconst page = await newE2EPage();\n\t\t\tawait page.setContent(\"<ontario-input name='ontario-input'></ontario-input>\");\n\t\t\tconst component = await page.find('ontario-input');\n\t\t\tconst element = await page.find('ontario-input >>> input');\n\n\t\t\texpect(component).toHaveClass('hydrated');\n\t\t\texpect(element).toHaveClass('ontario-input');\n\t\t\texpect(element).toEqualAttributes({\n\t\t\t\tname: 'ontario-input',\n\t\t\t});\n\t\t});\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-input name='ontario-input'></ontario-input>\");\n\t\t\tcomponent = await page.find('ontario-input');\n\t\t\telement = await page.find('ontario-input >>> input');\n\t\t});\n\n\t\tit('renders changes to the id property', async () => {\n\t\t\tcomponent.setProperty('elementId', 'ontario-input-id');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toEqualAttributes({\n\t\t\t\tname: 'ontario-input',\n\t\t\t\ttype: 'text',\n\t\t\t\tid: 'ontario-input-id',\n\t\t\t});\n\t\t});\n\n\t\tit('renders changes to the type property', async () => {\n\t\t\tcomponent.setProperty('type', 'tel');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toEqualAttributes({\n\t\t\t\tname: 'ontario-input',\n\t\t\t\ttype: 'tel',\n\t\t\t});\n\t\t});\n\n\t\tit('renders changes to the value attribute', async () => {\n\t\t\tcomponent.setAttribute('value', 'This is a test');\n\t\t\tawait page.waitForChanges();\n\t\t\tconst value = component.getAttribute('value');\n\t\t\texpect(value).toEqual('This is a test');\n\t\t});\n\t});\n\n\tdescribe('render CSS classes', () => {\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-input name='ontario-input'></ontario-input>\");\n\t\t\tcomponent = await page.find('ontario-input');\n\t\t\telement = await page.find('ontario-input >>> input');\n\t\t});\n\n\t\tit('should render the 2-char-width class when the inputWidth prop is two characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '2-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--2-char-width']);\n\t\t});\n\n\t\tit('should render the 3-char-width class when the inputWidth prop is three characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '3-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--3-char-width']);\n\t\t});\n\n\t\tit('should render the 4-char-width class when the inputWidth prop is four characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '4-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--4-char-width']);\n\t\t});\n\n\t\tit('should render the 5-char-width class when the inputWidth prop is five characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '5-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--5-char-width']);\n\t\t});\n\n\t\tit('should render the 7-char-width class when the inputWidth prop is seven characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '7-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--7-char-width']);\n\t\t});\n\n\t\tit('should render the 10-char-width class when the inputWidth prop is ten characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '10-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--10-char-width']);\n\t\t});\n\n\t\tit('should render the 20-char-width class when the inputWidth prop is twenty characters', async () => {\n\t\t\tcomponent.setProperty('inputWidth', '20-char-width');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-input--20-char-width']);\n\t\t});\n\n\t\tit('should render only the `ontario-input` class when no inputWidth prop is defined', async () => {\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toHaveClass('ontario-input');\n\t\t});\n\t});\n\n\tdescribe('events/methods', () => {\n\t\tit('fires the onBlur event', async () => {\n\t\t\tconst page = await newE2EPage();\n\t\t\tawait page.setContent(\"<ontario-input name='ontario-input'></ontario-input>\");\n\t\t\tconst blurEvent = await page.spyOnEvent('inputOnBlur');\n\t\t\tconst component = await page.find('ontario-input');\n\n\t\t\tcomponent.triggerEvent('inputOnBlur');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(blurEvent).toHaveReceivedEventTimes(1);\n\t\t});\n\n\t\tit('fires the onFocus event', async () => {\n\t\t\tconst page = await newE2EPage();\n\t\t\tawait page.setContent(\"<ontario-input name='ontario-input'></ontario-input>\");\n\t\t\tconst focusEvent = await page.spyOnEvent('inputOnFocus');\n\t\t\tconst component = await page.find('ontario-input');\n\n\t\t\tcomponent.triggerEvent('inputOnFocus');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(focusEvent).toHaveReceivedEventTimes(1);\n\t\t});\n\n\t\tit('fires the onChange event', async () => {\n\t\t\tconst page = await newE2EPage();\n\t\t\tawait page.setContent(\"<ontario-input name='ontario-input'></ontario-input>\");\n\t\t\tconst changeEvent = await page.spyOnEvent('inputOnChange');\n\t\t\tconst component = await page.find('ontario-input');\n\n\t\t\tcomponent.triggerEvent('inputOnChange');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(changeEvent).toHaveReceivedEventTimes(1);\n\t\t});\n\t});\n});\n\ndescribe('events', () => {\n\tit('fires the onChange event', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent(\"<ontario-input name='ontario-input'></ontario-input>\");\n\t\tconst changeEvent = await page.spyOnEvent('change');\n\t\tconst component = await page.find('ontario-input');\n\n\t\tcomponent.triggerEvent('change');\n\t\tawait page.waitForChanges();\n\t\texpect(changeEvent).toHaveReceivedEventTimes(1);\n\t});\n});\n"]}

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

@@ -0,0 +1,118 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioInput } from '../ontario-input';
+describe('ontario-input', () => {
+	describe('snapshot', () => {
+		it('should render the expected html', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input element-id="ontario-input" caption='{"captionText": "Ontario Input"}' name="ontario-input"></ontario-input>`,
+			});
+			expect(page.root).toMatchSnapshot();
+		});
+	});
+	describe('render', () => {
+		it('should render a default input element', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input element-id="ontario-input" caption='{"captionText": "Ontario Input"}' name="ontario-input"></ontario-input>`,
+			});
+			expect(page.root).toEqualHtml(`
+				<ontario-input element-id="ontario-input" caption='{"captionText": "Ontario Input"}' name="ontario-input">
+					<mock:shadow-root>
+						<div class="ontario-form-group">
+							<label class="ontario-label" htmlfor="ontario-input">
+								Ontario Input
+								<span class="ontario-label__flag">
+									(optional)
+								</span>
+							</label>
+							<div class="ontario-error-messaging ontario-error__hidden" role="alert">
+								<ontario-icon-alert-error></ontario-icon-alert-error>
+								<div class="ontario-error-messaging__content"></div>
+							</div>
+							<input type='text' class="ontario-input" id="ontario-input" name="ontario-input" value=""></input>
+						</div>
+					</mock:shadow-root>
+				</ontario-input>
+			`);
+		});
+		it('should reflect attributes/props being set', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input
+					name="input-name"
+					element-id="input-id"
+					value="input value"
+					type='tel'
+					input-width='7-char-width'
+					caption='{"captionText": "Ontario Input"}'
+				></ontario-input>`,
+			});
+			expect(page.rootInstance.name).toBe('input-name');
+			expect(page.rootInstance.value).toBe('input value');
+			expect(page.rootInstance.elementId).toBe('input-id');
+			expect(page.rootInstance.type).toBe('tel');
+			expect(page.rootInstance.inputWidth).toBe('7-char-width');
+			expect(page.rootInstance.captionState.captionText).toBe('Ontario Input');
+		});
+	});
+	describe('events/methods', () => {
+		it('should emit a keyboard event on change', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input
+					name="input-name"
+					element-id="input-id"
+				></ontario-input>`,
+			});
+			const emitSpy = jest.fn();
+			const leftArrowKeyCode = 37;
+			page.doc.addEventListener('inputOnChange', emitSpy);
+			page.rootInstance.handleEvent(
+				new KeyboardEvent('keydown', {
+					keyCode: leftArrowKeyCode,
+				}),
+				'change',
+			);
+			await page.waitForChanges();
+			expect(emitSpy).toHaveBeenCalled();
+		});
+		// Note: This is skipped until it can be figured out why it doesn't work.
+		it.skip('should update the input value on a change event', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input
+					name="input-name"
+					element-id="input-id"
+				></ontario-input>`,
+			});
+			const emitSpy = jest.fn();
+			const testValue = 'This is a test';
+			const leftArrowKeyCode = 37;
+			page.doc.addEventListener('inputOnChange', emitSpy);
+			page.rootInstance.value = testValue;
+			console.log('value:', page.rootInstance.value);
+			page.rootInstance.handleEvent(
+				new KeyboardEvent('keydown', {
+					keyCode: leftArrowKeyCode,
+				}),
+				'change',
+			);
+			await page.waitForChanges();
+			console.log('value2:', page.rootInstance.value);
+			expect(emitSpy).toHaveBeenCalled();
+			expect(page.rootInstance.value).toBe(testValue);
+		});
+		it('should return the input id when using the getId method', async () => {
+			const page = await newSpecPage({
+				components: [OntarioInput],
+				html: `<ontario-input
+					name="input-name"
+					element-id="input-id"
+				></ontario-input>`,
+			});
+			expect(page.rootInstance.getId()).toEqual('input-id');
+		});
+	});
+});
+//# sourceMappingURL=ontario-input.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-input.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-input/test/ontario-input.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioInput } from '../ontario-input';\n\ndescribe('ontario-input', () => {\n\tdescribe('snapshot', () => {\n\t\tit('should render the expected html', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input element-id=\"ontario-input\" caption='{\"captionText\": \"Ontario Input\"}' name=\"ontario-input\"></ontario-input>`,\n\t\t\t});\n\n\t\t\texpect(page.root).toMatchSnapshot();\n\t\t});\n\t});\n\n\tdescribe('render', () => {\n\t\tit('should render a default input element', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input element-id=\"ontario-input\" caption='{\"captionText\": \"Ontario Input\"}' name=\"ontario-input\"></ontario-input>`,\n\t\t\t});\n\t\t\texpect(page.root).toEqualHtml(`\n\t\t\t\t<ontario-input element-id=\"ontario-input\" caption='{\"captionText\": \"Ontario Input\"}' name=\"ontario-input\">\n\t\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t\t<label class=\"ontario-label\" htmlfor=\"ontario-input\">\n\t\t\t\t\t\t\t\tOntario Input\n\t\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"ontario-error-messaging ontario-error__hidden\" role=\"alert\">\n\t\t\t\t\t\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t\t\t\t\t\t<div class=\"ontario-error-messaging__content\"></div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<input type='text' class=\"ontario-input\" id=\"ontario-input\" name=\"ontario-input\" value=\"\"></input>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</mock:shadow-root>\n\t\t\t\t</ontario-input>\n\t\t\t`);\n\t\t});\n\n\t\tit('should reflect attributes/props being set', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input\n\t\t\t\t\tname=\"input-name\"\n\t\t\t\t\telement-id=\"input-id\"\n\t\t\t\t\tvalue=\"input value\"\n\t\t\t\t\ttype='tel'\n\t\t\t\t\tinput-width='7-char-width'\n\t\t\t\t\tcaption='{\"captionText\": \"Ontario Input\"}'\n\t\t\t\t></ontario-input>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.name).toBe('input-name');\n\t\t\texpect(page.rootInstance.value).toBe('input value');\n\t\t\texpect(page.rootInstance.elementId).toBe('input-id');\n\t\t\texpect(page.rootInstance.type).toBe('tel');\n\t\t\texpect(page.rootInstance.inputWidth).toBe('7-char-width');\n\t\t\texpect(page.rootInstance.captionState.captionText).toBe('Ontario Input');\n\t\t});\n\t});\n\n\tdescribe('events/methods', () => {\n\t\tit('should emit a keyboard event on change', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input\n\t\t\t\t\tname=\"input-name\"\n\t\t\t\t\telement-id=\"input-id\"\n\t\t\t\t></ontario-input>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(emitSpy).toHaveBeenCalled();\n\t\t});\n\n\t\t// Note: This is skipped until it can be figured out why it doesn't work.\n\t\tit.skip('should update the input value on a change event', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input\n\t\t\t\t\tname=\"input-name\"\n\t\t\t\t\telement-id=\"input-id\"\n\t\t\t\t></ontario-input>`,\n\t\t\t});\n\n\t\t\tconst emitSpy = jest.fn();\n\t\t\tconst testValue = 'This is a test';\n\t\t\tconst leftArrowKeyCode = 37;\n\t\t\tpage.doc.addEventListener('inputOnChange', emitSpy);\n\t\t\tpage.rootInstance.value = testValue;\n\t\t\tconsole.log('value:', page.rootInstance.value);\n\t\t\tpage.rootInstance.handleEvent(\n\t\t\t\tnew KeyboardEvent('keydown', {\n\t\t\t\t\tkeyCode: leftArrowKeyCode,\n\t\t\t\t}),\n\t\t\t\t'change',\n\t\t\t);\n\t\t\tawait page.waitForChanges();\n\t\t\tconsole.log('value2:', page.rootInstance.value);\n\t\t\texpect(emitSpy).toHaveBeenCalled();\n\t\t\texpect(page.rootInstance.value).toBe(testValue);\n\t\t});\n\n\t\tit('should return the input id when using the getId method', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioInput],\n\t\t\t\thtml: `<ontario-input\n\t\t\t\t\tname=\"input-name\"\n\t\t\t\t\telement-id=\"input-id\"\n\t\t\t\t></ontario-input>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.getId()).toEqual('input-id');\n\t\t});\n\t});\n});\n"]}

package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.css

@@ -0,0 +1,216 @@
+/* -------------------------------
+    Global spacing variables
+--------------------------------- */
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/*
+*  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 */
+/* -------------------------------
+    Global font-weight variables
+--------------------------------- */
+/*** 1 - Breakpoint sizes for media queries ***/ /* -------------------------------
+    Global letter-spacing variables
+--------------------------------- */
+/* Rem calc function */
+/* Pixel to REM Conversion */
+/* -------------------------------
+    Global line-height variables
+--------------------------------- */
+/* -------------------------------
+    Global typography variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder variables
+--------------------------------- */
+/* -------------------------------
+    Focus placeholder
+--------------------------------- */
+.ontario-language-toggler:focus {
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: box-shadow 0.1s ease-in-out;
+}
+
+/*
+* Visibility
+*
+* Helper classes to determine visibility of elements
+*/
+.ontario-hide {
+	display: none !important;
+}
+
+.ontario-invisible {
+	visibility: hidden !important;
+}
+
+@media screen and (max-width: 39.937em) {
+	.ontario-hide-for-small-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 0em), screen and (min-width: 40em) {
+	.ontario-show-for-small-only {
+		display: none !important;
+	}
+}
+@media print, screen and (min-width: 40em) {
+	.ontario-hide-for-medium {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 39.937em) {
+	.ontario-show-for-medium {
+		display: none !important;
+	}
+}
+@media screen and (min-width: 40em) and (max-width: 72.937em) {
+	.ontario-hide-for-medium-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 39.937em), screen and (min-width: 73em) {
+	.ontario-show-for-medium-only {
+		display: none !important;
+	}
+}
+@media print, screen and (min-width: 73em) {
+	.ontario-hide-for-large {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 72.937em) {
+	.ontario-show-for-large {
+		display: none !important;
+	}
+}
+@media screen and (min-width: 73em) and (max-width: 95.937em) {
+	.ontario-hide-for-large-only {
+		display: none !important;
+	}
+}
+@media screen and (max-width: 72.937em), screen and (min-width: 96em) {
+	.ontario-show-for-large-only {
+		display: none !important;
+	}
+}
+.ontario-show-for-sr,
+.ontario-show-on-focus {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+}
+
+.ontario-show-on-focus:active,
+.ontario-show-on-focus:focus {
+	position: static;
+	width: auto;
+	height: auto;
+	overflow: visible;
+	clip: auto;
+}
+
+.ontario-show-for-landscape,
+.ontario-hide-for-portrait {
+	display: block !important;
+}
+
+@media screen and (orientation: landscape) {
+	.ontario-show-for-landscape,
+	.ontario-hide-for-portrait {
+		display: block !important;
+	}
+}
+@media screen and (orientation: portrait) {
+	.ontario-show-for-landscape,
+	.ontario-hide-for-portrait {
+		display: none !important;
+	}
+}
+.ontario-hide-for-landscape,
+.ontario-show-for-portrait {
+	display: none !important;
+}
+
+@media screen and (orientation: landscape) {
+	.ontario-hide-for-landscape,
+	.ontario-show-for-portrait {
+		display: none !important;
+	}
+}
+@media screen and (orientation: portrait) {
+	.ontario-hide-for-landscape,
+	.ontario-show-for-portrait {
+		display: block !important;
+	}
+}
+.ontario-language-toggler {
+	background-color: #1a1a1a;
+	border: none;
+	border-radius: 4px;
+	box-sizing: border-box;
+	box-shadow: none;
+	color: #ffffff;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	font-size: 1.125rem;
+	font-weight: 600;
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	height: 48px;
+	line-height: 1.5555555556;
+	text-align: center;
+	text-decoration: none;
+}
+.ontario-language-toggler:hover {
+	background-color: #4d4d4d;
+}
+.ontario-language-toggler:active {
+	background-color: #666666;
+	color: #ffffff;
+}
+.ontario-language-toggler:focus {
+	background-color: #4d4d4d;
+	color: #ffffff;
+}
+.ontario-language-toggler:visited {
+	color: #ffffff;
+}
+.ontario-language-toggler abbr[title] {
+	text-decoration: none;
+}
+
+.ontario-language-toggler--default {
+	padding: 0.75rem;
+}
+
+.ontario-language-toggler--small {
+	font-size: 1rem;
+	line-height: 1.375rem;
+	height: auto;
+	outline: none;
+	padding: 0.5rem 0.75rem;
+}