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

package/dist/collection/components/ontario-dropdown-list/ontario-dropdown-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-dropdown-list.js","sourceRoot":"","sources":["../../../src/components/ontario-dropdown-list/ontario-dropdown-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tState,\n\tElement,\n\th,\n\tProp,\n\tEvent,\n\tListen,\n\tWatch,\n\tgetAssetPath,\n\tEventEmitter,\n\tAttachInternals,\n} from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { DropdownOption } from './dropdown-option.interface';\nimport { Dropdown } from './dropdown.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 {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { hasMultipleTrueValues } from '../../utils/helper/utils';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport { InputFocusBlurEvent, EventType, InputInteractionEvent } from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-dropdown-list',\n\tstyleUrl: 'ontario-dropdown-list.scss',\n\tshadow: true,\n\tformAssociated: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioDropdownList implements Dropdown {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the dropdown list label.\n\t *\n\t * @example\n\t * <ontario-dropdown-list\n\t *   name=\"ontario-dropdown-list\"\n\t *   caption='{\n\t *     \"captionText\": \"Label\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   ...>\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name for the dropdown list. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The ID for the dropdown list.\n\t * If no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * The options for dropdown list.\n\t *\n\t * Each option will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t *\n\t * In the example below, the options are being passed in as a string and there are three dropdown options displayed.\n\t *\n\t * @example\n\t * <ontario-dropdown-list\n\t *   caption='{\n\t *     \"captionText\": \"Label\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   name=\"ontario-dropdown-list\"\n\t *   options='[\n\t *     {\n\t *       \"value\": \"dropdown-option-1\",\n\t *       \"label\": \"Option 1\",\n\t *       \"selected\": \"true\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-2\",\n\t *       \"label\": \"Option 2\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-3\",\n\t *       \"label\": \"Option 3\"\n\t *     }\n\t *   ]'\n\t * >\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() options: string | DropdownOption[];\n\n\t/**\n\t * This is used to determine whether the dropdown list is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * This prop is used to determine whether or not the initial option displayed is empty.\n\t * If set to `true`, it will render the default “select” text.\n\t * If set to a string, it will render the string value.\n\t *\n\t * @example\n\t * <ontario-dropdown-list is-empty-start-option=\"true\"></ontario-dropdown-list>\n\t *\n\t * or\n\t *\n\t * <ontario-dropdown-list is-empty-start-option=\"Please select\"></ontario-dropdown-list>\n\t */\n\t@Prop() isEmptyStartOption?: boolean | string = false;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the dropdown list.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the dropdown list 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-dropdown-list\n\t *   caption='{\n\t *     \"caption\": \"What province do you live in?\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   name=\"ontario-dropdown-list\"\n\t *   options='[\n\t *     {\n\t *       \"value\": \"dropdown-option-1\",\n\t *       \"label\": \"Option 1\",\n\t *       \"selected\": \"true\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-2\",\n\t *       \"label\": \"Option 2\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-3\",\n\t *       \"label\": \"Option 3\"\n\t *     }\n\t *   ]'\n\t *   hint-expander='{\n\t *    \"hint\": \"Hint expander for the dropdown list\",\n\t *    \"content\": \"Example hint expander content for the dropdown list.\"\n\t *   }'\n\t * >\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * Used to add a custom function to the dropdown 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 dropdown 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 dropdown onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\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 * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: DropdownOption[];\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@State() translations: any = translations;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.\n\t */\n\t@Event() dropdownOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a dropdown list has lost focus.\n\t */\n\t@Event() dropdownOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a dropdown list has gained focus.\n\t */\n\t@Event() dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/*\n\t * Watch for changes in the `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-dropdown-list> ')\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 in the `options` prop for validation purposes.\n\t *\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t */\n\t@Watch('options')\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\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 `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\n\t\t// Check selected status of options and set the selectedValue\n\t\tthis.validateSelectedOption(this.internalOptions);\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `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 `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 * 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 * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLSelectElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.dropdownOnChange,\n\t\t\tthis.dropdownOnFocus,\n\t\t\tthis.dropdownOnBlur,\n\t\t\tundefined,\n\t\t\t'dropdown',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This function will set a selected key to `false` for each dropdown if no selected value is passed.\n\t *\n\t * It will also pass a warning to the user if multiple `true` selected values are passed.\n\t *\n\t * @param options\n\t * @returns options\n\t */\n\tprivate validateSelectedOption(options: DropdownOption[]) {\n\t\tconst selected = 'selected';\n\n\t\toptions.forEach((singleOption) => {\n\t\t\t// if no selected key is passed, set a default key to false\n\t\t\tif (!singleOption.hasOwnProperty(selected)) {\n\t\t\t\tsingleOption.selected = false;\n\t\t\t}\n\t\t});\n\n\t\tif (hasMultipleTrueValues(options, selected)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' There are duplicate truthy `selected` values ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('options. Please update options so only one truthy `selected` value exists.')\n\t\t\t\t.printMessage();\n\t\t}\n\n\t\treturn options;\n\t}\n\n\tprivate getDropdownArrow() {\n\t\treturn {\n\t\t\tbackgroundImage: `url(${getAssetPath('./assets/ontario-material-dropdown-arrow-48px.svg')})`,\n\t\t};\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander\n\t\t\t? `ontario-input ontario-dropdown ontario-dropdown-hint-expander--true`\n\t\t\t: `ontario-input ontario-dropdown`;\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 select `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.parseOptions();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\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<select\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tstyle={this.getDropdownArrow()}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t>\n\t\t\t\t\t{this.isEmptyStartOption &&\n\t\t\t\t\t\t(this.isEmptyStartOption === true || this.isEmptyStartOption === 'true' ? (\n\t\t\t\t\t\t\t<option>{this.translations.dropdownList.select[`${this.language}`]}</option>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<option>{this.isEmptyStartOption}</option>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{this.internalOptions?.map((dropdown) => (\n\t\t\t\t\t\t<option value={dropdown.value} selected={dropdown.selected}>\n\t\t\t\t\t\t\t{dropdown.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t)) ?? ''}\n\t\t\t\t</select>\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-dropdown-list/test/ontario-dropdown-list.e2e.js

@@ -0,0 +1,47 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('ontario-dropdown-list', () => {
+	it('renders dropdown-list', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-dropdown-list></ontario-dropdown-list>');
+		const component = await page.find('ontario-dropdown-list');
+		const element = await page.find('ontario-dropdown-list >>> select');
+		expect(component).toHaveClass('hydrated');
+		expect(element).toHaveClasses(['ontario-input', 'ontario-dropdown']);
+	});
+	describe('render changes', () => {
+		let page;
+		let component;
+		let element;
+		beforeEach(async () => {
+			page = await newE2EPage();
+			await page.setContent(`<ontario-dropdown-list
+                  name="dropdown-options"
+                  element-id="dropdown-list",
+                  is-empty-start-option="Please select"
+                  caption='{"captionText": "Label"}'
+				  options='[{ "value": "dropdown-option-1", "label": "Option 1" }]'
+				></ontario-dropdown-list>`);
+			component = await page.find('ontario-dropdown-list');
+			element = await page.find('ontario-dropdown-list >>> select');
+		});
+		it('renders changes to the name property', async () => {
+			component.setProperty('name', 'ontario-dropdown-name');
+			await page.waitForChanges();
+			expect(element).toEqualAttributes({
+				name: 'ontario-dropdown-name',
+			});
+		});
+	});
+});
+describe('events', () => {
+	it('fires the onChange event', async () => {
+		const page = await newE2EPage();
+		await page.setContent('<ontario-dropdown-list></ontario-dropdown-list>');
+		const changeEvent = await page.spyOnEvent('change');
+		const component = await page.find('ontario-dropdown-list');
+		component.triggerEvent('change');
+		await page.waitForChanges();
+		expect(changeEvent).toHaveReceivedEventTimes(1);
+	});
+});
+//# sourceMappingURL=ontario-dropdown-list.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-dropdown-list.e2e.js","sourceRoot":"","sources":["../../../../src/components/ontario-dropdown-list/test/ontario-dropdown-list.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iDAAiD,CAAC,CAAC;QACzE,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3D,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;QAEpE,MAAM,CAAC,SAAS,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1C,MAAM,CAAC,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC,eAAe,EAAE,kBAAkB,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC/B,IAAI,IAAS,CAAC;QACd,IAAI,SAAc,CAAC;QACnB,IAAI,OAAY,CAAC;QAEjB,UAAU,CAAC,KAAK,IAAI,EAAE;YACrB,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;YAC1B,MAAM,IAAI,CAAC,UAAU,CACpB;;;;;;8BAM0B,CAC1B,CAAC;YACF,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YACrD,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;YACrD,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC;YACvD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAC5B,MAAM,CAAC,OAAO,CAAC,CAAC,iBAAiB,CAAC;gBACjC,IAAI,EAAE,uBAAuB;aAC7B,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACvB,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;QAChC,MAAM,IAAI,CAAC,UAAU,CAAC,iDAAiD,CAAC,CAAC;QACzE,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;QACpD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAE3D,SAAS,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC5B,MAAM,CAAC,WAAW,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;IACjD,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ontario-dropdown-list', () => {\n\tit('renders dropdown-list', async () => {\n\t\tconst page = await newE2EPage();\n\t\tawait page.setContent('<ontario-dropdown-list></ontario-dropdown-list>');\n\t\tconst component = await page.find('ontario-dropdown-list');\n\t\tconst element = await page.find('ontario-dropdown-list >>> select');\n\n\t\texpect(component).toHaveClass('hydrated');\n\t\texpect(element).toHaveClasses(['ontario-input', 'ontario-dropdown']);\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(\n\t\t\t\t`<ontario-dropdown-list\n                  name=\"dropdown-options\"\n                  element-id=\"dropdown-list\",\n                  is-empty-start-option=\"Please select\"\n                  caption='{\"captionText\": \"Label\"}'\n\t\t\t\t  options='[{ \"value\": \"dropdown-option-1\", \"label\": \"Option 1\" }]'\n\t\t\t\t></ontario-dropdown-list>`,\n\t\t\t);\n\t\t\tcomponent = await page.find('ontario-dropdown-list');\n\t\t\telement = await page.find('ontario-dropdown-list >>> select');\n\t\t});\n\n\t\tit('renders changes to the name property', async () => {\n\t\t\tcomponent.setProperty('name', 'ontario-dropdown-name');\n\t\t\tawait page.waitForChanges();\n\t\t\texpect(element).toEqualAttributes({\n\t\t\t\tname: 'ontario-dropdown-name',\n\t\t\t});\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-dropdown-list></ontario-dropdown-list>');\n\t\tconst changeEvent = await page.spyOnEvent('change');\n\t\tconst component = await page.find('ontario-dropdown-list');\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-dropdown-list/test/ontario-dropdown-list.spec.js

@@ -0,0 +1,46 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { OntarioDropdownList } from '../ontario-dropdown-list';
+describe('ontario-dropdown-list', () => {
+	describe('render', () => {
+		it('should render a dropdown list element', async () => {
+			const page = await newSpecPage({
+				components: [OntarioDropdownList],
+				html: `<ontario-dropdown-list element-id="dropdown-list" options='[{ "value": "dropdown-option-1", "label": "Option 1" }]'></ontario-dropdown-list>`,
+			});
+			expect(page.root).toEqualHtml(`
+				<ontario-dropdown-list element-id="dropdown-list" options='[{ "value": "dropdown-option-1", "label": "Option 1" }]'>
+				<mock:shadow-root>
+					<div class="ontario-form-group">
+						<label class="ontario-label" htmlfor="dropdown-list">
+							<span class="ontario-label__flag">
+							(optional)
+							</span>
+						</label>
+						<select class="ontario-dropdown ontario-input" id="dropdown-list" style="background-image: url(/assets/ontario-material-dropdown-arrow-48px.svg);">
+							<option value="dropdown-option-1">Option 1</option>
+						</select>
+					</div>
+				</mock:shadow-root>
+				</ontario-dropdown-list>
+			`);
+		});
+		it('should reflect attributes/props being set', async () => {
+			const page = await newSpecPage({
+				components: [OntarioDropdownList],
+				html: `<ontario-dropdown-list
+                  name="dropdown-options"
+                  element-id="dropdown-list",
+                  is-empty-start-option="Please select"
+                  caption='{"captionText": "Label"}'
+				  options='[{ "value": "dropdown-option-1", "label": "Option 1" }]'
+				></ontario-dropdown-list>`,
+			});
+			expect(page.rootInstance.name).toBe('dropdown-options');
+			expect(page.rootInstance.elementId).toBe('dropdown-list');
+			expect(page.rootInstance.isEmptyStartOption).toBe('Please select');
+			expect(page.rootInstance.captionState.captionText).toBe('Label');
+			expect(page.rootInstance.options).toBe('[{ "value": "dropdown-option-1", "label": "Option 1" }]');
+		});
+	});
+});
+//# sourceMappingURL=ontario-dropdown-list.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-dropdown-list.spec.js","sourceRoot":"","sources":["../../../../src/components/ontario-dropdown-list/test/ontario-dropdown-list.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAE/D,QAAQ,CAAC,uBAAuB,EAAE,GAAG,EAAE;IACtC,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACvB,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;YACtD,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,mBAAmB,CAAC;gBACjC,IAAI,EAAE,8IAA8I;aACpJ,CAAC,CAAC;YACH,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;IAe7B,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,2CAA2C,EAAE,KAAK,IAAI,EAAE;YAC1D,MAAM,IAAI,GAAG,MAAM,WAAW,CAAC;gBAC9B,UAAU,EAAE,CAAC,mBAAmB,CAAC;gBACjC,IAAI,EAAE;;;;;;8BAMoB;aAC1B,CAAC,CAAC;YAEH,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;YACxD,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC1D,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACnE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YACjE,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC;QACnG,CAAC,CAAC,CAAC;IACJ,CAAC,CAAC,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { OntarioDropdownList } from '../ontario-dropdown-list';\n\ndescribe('ontario-dropdown-list', () => {\n\tdescribe('render', () => {\n\t\tit('should render a dropdown list element', async () => {\n\t\t\tconst page = await newSpecPage({\n\t\t\t\tcomponents: [OntarioDropdownList],\n\t\t\t\thtml: `<ontario-dropdown-list element-id=\"dropdown-list\" options='[{ \"value\": \"dropdown-option-1\", \"label\": \"Option 1\" }]'></ontario-dropdown-list>`,\n\t\t\t});\n\t\t\texpect(page.root).toEqualHtml(`\n\t\t\t\t<ontario-dropdown-list element-id=\"dropdown-list\" options='[{ \"value\": \"dropdown-option-1\", \"label\": \"Option 1\" }]'>\n\t\t\t\t<mock:shadow-root>\n\t\t\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t\t\t<label class=\"ontario-label\" htmlfor=\"dropdown-list\">\n\t\t\t\t\t\t\t<span class=\"ontario-label__flag\">\n\t\t\t\t\t\t\t(optional)\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<select class=\"ontario-dropdown ontario-input\" id=\"dropdown-list\" style=\"background-image: url(/assets/ontario-material-dropdown-arrow-48px.svg);\">\n\t\t\t\t\t\t\t<option value=\"dropdown-option-1\">Option 1</option>\n\t\t\t\t\t\t</select>\n\t\t\t\t\t</div>\n\t\t\t\t</mock:shadow-root>\n\t\t\t\t</ontario-dropdown-list>\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: [OntarioDropdownList],\n\t\t\t\thtml: `<ontario-dropdown-list\n                  name=\"dropdown-options\"\n                  element-id=\"dropdown-list\",\n                  is-empty-start-option=\"Please select\"\n                  caption='{\"captionText\": \"Label\"}'\n\t\t\t\t  options='[{ \"value\": \"dropdown-option-1\", \"label\": \"Option 1\" }]'\n\t\t\t\t></ontario-dropdown-list>`,\n\t\t\t});\n\n\t\t\texpect(page.rootInstance.name).toBe('dropdown-options');\n\t\t\texpect(page.rootInstance.elementId).toBe('dropdown-list');\n\t\t\texpect(page.rootInstance.isEmptyStartOption).toBe('Please select');\n\t\t\texpect(page.rootInstance.captionState.captionText).toBe('Label');\n\t\t\texpect(page.rootInstance.options).toBe('[{ \"value\": \"dropdown-option-1\", \"label\": \"Option 1\" }]');\n\t\t});\n\t});\n});\n"]}

package/dist/collection/components/ontario-fieldset/ontario-fieldset.css

@@ -0,0 +1,481 @@
+@charset "UTF-8";
+/*
+*  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
+--------------------------------- */
+/* -------------------------------
+    Global font-size variables
+--------------------------------- */
+/* -------------------------------
+    Global spacing 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
+--------------------------------- */
+h6,
+.ontario-h6,
+h5,
+.ontario-h5,
+h4,
+.ontario-h4,
+h3,
+.ontario-h3,
+h2,
+.ontario-h2,
+.ontario-fieldset__legend--large h1,
+.ontario-fieldset__legend--heading h1,
+h1,
+.ontario-h1 {
+	font-style: normal;
+	font-weight: 700;
+	text-rendering: optimizeLegibility;
+	margin-bottom: 1rem;
+	font-feature-settings: normal;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+.ontario-fieldset__legend--large h1,
+.ontario-fieldset__legend--heading h1,
+h1,
+.ontario-h1 {
+	font-size: 2rem;
+	letter-spacing: 0.04rem;
+	line-height: 1.29;
+	margin: 2.5rem 0 1.5rem 0;
+	max-width: 70rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-fieldset__legend--large h1,
+	.ontario-fieldset__legend--heading h1,
+	h1,
+	.ontario-h1 {
+		font-size: 2.5rem;
+		letter-spacing: 0.04rem;
+		line-height: 1.2;
+	}
+}
+
+h2,
+.ontario-h2 {
+	font-size: 1.6875rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.37;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h2,
+	.ontario-h2 {
+		font-size: 2.0625rem;
+		letter-spacing: 0.02rem;
+		line-height: 1.33;
+	}
+}
+
+h3,
+.ontario-h3 {
+	font-size: 1.4375rem;
+	letter-spacing: 0.02rem;
+	line-height: 1.39;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h3,
+	.ontario-h3 {
+		font-size: 1.75rem;
+		letter-spacing: 0.02rem;
+		line-height: 1.43;
+	}
+}
+
+h4,
+.ontario-h4 {
+	font-size: 1.25rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.5;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h4,
+	.ontario-h4 {
+		font-size: 1.5rem;
+		letter-spacing: 0.0313rem;
+		line-height: 1.5;
+	}
+}
+
+h5,
+.ontario-h5 {
+	font-size: 1.125rem;
+	letter-spacing: 0.03rem;
+	line-height: 1.56;
+	margin: 0 0 0.75rem 0;
+	max-width: 48rem;
+}
+@media screen and (min-width: 40em) {
+	h5,
+	.ontario-h5 {
+		font-size: 1.1875rem;
+		letter-spacing: 0.025rem;
+		line-height: 1.5;
+	}
+}
+
+h6,
+.ontario-h6 {
+	font-size: 1rem;
+	line-height: 1.56;
+	letter-spacing: 0.03rem;
+	max-width: 48rem;
+	margin: 0 0 0.75rem 0;
+}
+@media screen and (min-width: 40em) {
+	h6,
+	.ontario-h6 {
+		font-size: 1rem;
+		letter-spacing: 0.025rem;
+		line-height: 1.5;
+	}
+}
+
+.ontario-lead-statement {
+	font-size: 1.25rem;
+	line-height: 1.6;
+	max-width: 70rem;
+}
+@media screen and (min-width: 40em) {
+	.ontario-lead-statement {
+		font-size: 1.375rem;
+	}
+}
+
+/*
+*  Global variables
+*
+*  Used across multiple components
+*/
+/*
+*  Global elements
+*
+*  1 - Unclassed elements
+*    1.1 - Base
+*    1.2 - Typography
+*    1.3 - Forms
+*    1.4 - Horizontal Rule
+*    1.5 - Lists
+*/
+/*** 1 - Unclassed Elements ***/
+/* Base */
+html {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+}
+
+body {
+	font-size: 1rem;
+	line-height: 1.6;
+	background-color: #ffffff;
+	color: #1a1a1a;
+	margin: 0;
+}
+
+/* Typography */
+p {
+	font-size: inherit;
+	margin-bottom: 1.25rem;
+	text-rendering: optimizeLegibility;
+	margin: 0 0 1.5rem 0;
+}
+
+cite {
+	font-style: italic;
+	line-height: inherit;
+}
+
+strong {
+	font-weight: 700;
+	line-height: inherit;
+}
+
+/* everything - including before and after - should inherit their box sizing */
+*,
+*::before,
+*::after {
+	box-sizing: inherit;
+}
+
+main p,
+main p:not(.ontario-lead-statement),
+main dd,
+main li {
+	max-width: 48rem;
+}
+
+hr {
+	border: 0;
+	padding: 0;
+	margin: 2.5rem 0;
+	border-bottom: 4px solid #cccccc;
+}
+
+/* Horizontal Rule */
+hr.ontario-hr--dark {
+	border-bottom: 4px solid #1a1a1a;
+}
+
+a {
+	color: #0066cc;
+	text-decoration: underline;
+}
+a:visited {
+	color: #551a8b;
+}
+a:hover {
+	color: #00478f;
+}
+a:active {
+	color: #002142;
+}
+a:focus {
+	-moz-box-shadow: 0 0 0 4px #009adb;
+	-webkit-box-shadow: 0 0 0 4px #009adb;
+	box-shadow: 0 0 0 4px #009adb;
+	outline: 4px solid transparent;
+	transition: all 0.1s ease-in-out;
+}
+
+​p {
+	margin: 0 0 1.5rem 0;
+}
+
+​p + h1,
+p + h2,
+p + h3,
+p + h4,
+p + h5,
+p + h6,
+ul + h1,
+ul + h2,
+ul + h3,
+ul + h4,
+ul + h5,
+ul + h6,
+ol + h1,
+ol + h2,
+ol + h3,
+ol + h4,
+ol + h5,
+ol + h6,
+h1 + h2,
+h2 + h3,
+h3 + h4,
+h4 + h5,
+h5 + h6 {
+	margin-top: 2rem;
+}
+
+p code,
+td code,
+li code {
+	line-height: 2.25rem;
+}
+
+/* Forms */
+input[type='text'],
+input[type='number'],
+input[type='email'],
+input[type='date'],
+input[type='color'],
+input[type='search'],
+input[type='tel'],
+textarea {
+	background-origin: initial;
+	height: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+input[type='checkbox'] + label,
+input[type='radio'] + label {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+	font-weight: 400;
+	margin-left: 0;
+	margin-right: 0;
+}
+
+fieldset {
+	border: 0;
+	margin: 0;
+	padding: 0;
+	page-break-inside: avoid;
+}
+
+legend,
+label {
+	display: block;
+	margin: 0;
+}
+
+select {
+	background-origin: initial;
+	height: auto;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+}
+
+/* Lists */
+ul,
+ol {
+	padding: 0;
+}
+
+ul {
+	margin-left: 2rem;
+}
+
+ul li {
+	padding: 0 0 0.75rem 0;
+}
+
+ol {
+	margin-left: 1.75rem;
+}
+
+ol li {
+	padding: 0 0 0.75rem 0.25rem;
+}
+
+ul li:last-child,
+ol li:last-child {
+	padding-bottom: 0;
+}
+
+ul[class*='columns-'] li:last-child,
+ol[class*='columns-'] li:last-child {
+	padding-bottom: 0.75rem;
+}
+
+ul ul,
+ol ul {
+	margin: 0.5rem 0 0.5rem 2rem;
+}
+
+ul ol,
+ol ol {
+	margin: 0.5rem 0 0.5rem 1.75rem;
+}
+
+p + ul,
+p + ol {
+	margin-top: -0.75rem;
+}
+
+@media screen and (min-width: 40em) {
+	ul {
+		margin: 0.5rem 0 1.5rem 3rem;
+	}
+	ol {
+		margin: 0.5rem 0 1.5rem 2.75rem;
+	}
+	ul ul,
+	ol ul {
+		margin: 0.5rem 0 0.5rem 3rem;
+	}
+	ul ol,
+	ol ol {
+		margin: 0.5rem 0 0.5rem 2.75rem;
+	}
+}
+.ontario-form-group:last-of-type {
+	margin-bottom: 3rem;
+}
+
+.ontario-fieldset__legend {
+	color: #1a1a1a;
+	font-family: 'Raleway', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1.1875rem;
+	font-weight: 700;
+	margin: 0 0 1rem 0;
+	line-height: 1.5;
+	max-width: 38.75em;
+	white-space: normal;
+	width: 100%;
+}
+@media screen and (max-width: 40em) {
+	.ontario-fieldset__legend {
+		font-size: 1.125rem;
+		line-height: 1.56;
+	}
+}
+
+.ontario-fieldset__legend--large,
+.ontario-fieldset__legend--heading {
+	letter-spacing: 0.02rem;
+	line-height: 1.2;
+}
+.ontario-fieldset__legend--large h1,
+.ontario-fieldset__legend--heading h1 {
+	display: inline-block;
+	margin: 0;
+}
+@media screen and (max-width: 40em) {
+	.ontario-fieldset__legend--large,
+	.ontario-fieldset__legend--heading {
+		font-size: 1.4375rem;
+		line-height: 1.39;
+	}
+}
+
+.ontario-fieldset__legend--large {
+	font-size: 1.75rem;
+}
+
+.ontario-fieldset__legend-required-flag,
+.ontario-fieldset__legend-optional-flag {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+	font-weight: 400;
+}
+.ontario-fieldset__legend-required-flag:before,
+.ontario-fieldset__legend-optional-flag:before {
+	content: ' ';
+}
+
+.ontario-label__flag {
+	font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 1rem;
+	font-weight: 400;
+}
+.ontario-label__flag:before {
+	content: ' ';
+}

package/dist/collection/components/ontario-fieldset/ontario-fieldset.interface.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ontario-fieldset.interface.js.map

package/dist/collection/components/ontario-fieldset/ontario-fieldset.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ontario-fieldset.interface.js","sourceRoot":"","sources":["../../../src/components/ontario-fieldset/ontario-fieldset.interface.ts"],"names":[],"mappings":"","sourcesContent":["import { CaptionType } from '../../utils/common/input-caption/input-caption.types';\n\nexport interface Fieldset {\n\t/**\n\t * The text value used for the legend of the fieldset.\n\t */\n\tlegend: string;\n\n\t/**\n\t * The size of the fieldset legend. If no prop is passed, it will be to `default`.\n\t */\n\tlegendSize: CaptionType;\n}\n"]}