npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.4 → 5.0.0-alpha.6 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2369) hide show

package/dist/components/ontario-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-input.js","mappings":"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","names":["OntarioInput","globalTranslations","uuid"],"sources":["src/components/ontario-input/ontario-input.scss?tag=ontario-input&encapsulation=shadow","src/components/ontario-input/ontario-input.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-input-padding: 0.625rem;\n$ontario-input-border-width: 0.125rem;\n\n.ontario-input {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: typography.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n\tpadding: $ontario-input-padding spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus !optional;\n\t}\n}\n\n.ontario-input-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-input--2-char-width {\n\tmax-width: 8ex;\n}\n\n.ontario-input--3-char-width {\n\tmax-width: 10ex;\n}\n\n.ontario-input--4-char-width {\n\tmax-width: 12ex;\n}\n\n.ontario-input--5-char-width {\n\tmax-width: 14ex;\n}\n\n.ontario-input--7-char-width {\n\tmax-width: 17ex;\n}\n\n.ontario-input--10-char-width {\n\tmax-width: 23ex;\n}\n\n.ontario-input--20-char-width {\n\tmax-width: 41ex;\n}\n\n.ontario-input--error {\n\tinput {\n\t\tborder: $ontario-input-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","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"],"version":3}
1	+ {"file":"ontario-input.js","mappings":"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","names":["OntarioInput","globalTranslations","uuid"],"sources":["src/components/ontario-input/ontario-input.scss?tag=ontario-input&encapsulation=shadow","src/components/ontario-input/ontario-input.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-input-padding: 0.625rem;\n$ontario-input-border-width: 0.125rem;\n\n.ontario-input {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tline-height: globalVariables.$line-height-default;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n\tpadding: $ontario-input-padding spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus !optional;\n\t}\n}\n\n.ontario-input-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-input--2-char-width {\n\tmax-width: 8ex;\n}\n\n.ontario-input--3-char-width {\n\tmax-width: 10ex;\n}\n\n.ontario-input--4-char-width {\n\tmax-width: 12ex;\n}\n\n.ontario-input--5-char-width {\n\tmax-width: 14ex;\n}\n\n.ontario-input--7-char-width {\n\tmax-width: 17ex;\n}\n\n.ontario-input--10-char-width {\n\tmax-width: 23ex;\n}\n\n.ontario-input--20-char-width {\n\tmax-width: 41ex;\n}\n\n.ontario-input--error {\n\tinput {\n\t\tborder: $ontario-input-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","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"],"version":3}

package/dist/components/ontario-language-toggle.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { O as OntarioLanguageToggle$1, d as defineCustomElement$1 } from './ontario-language-toggle2.js';
+import { O as OntarioLanguageToggle$1, d as defineCustomElement$1 } from './p-d8fbc69e.js';
 const OntarioLanguageToggle = OntarioLanguageToggle$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/ontario-language-toggle2.js CHANGED Viewed

@@ -18,23 +18,42 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 			this.__attachShadow();
 			this.setAppLanguage = createEvent(this, 'setAppLanguage', 7);
 			this.headerLanguageToggled = createEvent(this, 'headerLanguageToggled', 7);
-			/*
-			 * Updates the <html> lang attribute based on component languageState.
-			 */
-			this.updateHTMLLang = () => {
-				const htmlElement = getRootHTMLElement();
-				if (htmlElement) {
-					htmlElement.setAttribute('lang', this.languageState);
-				}
-			};
-			this.language = undefined;
-			this.size = 'default';
-			this.url = undefined;
-			this.customLanguageToggle = undefined;
-			this.translations = translations;
-			this.languageState = undefined;
-			this.oppositeLanguageLabel = undefined;
 		}
+		/**
+		 * The language of the component.
+		 *
+		 * In most cases, the language toggle should be the source of truth for determining the site language.
+		 *
+		 * Only pass a language value here if necessary.
+		 */
+		language;
+		/**
+		 * The size of the language toggle button.
+		 *
+		 * If no prop is passed, it will be set to the `default` size.
+		 */
+		size = 'default';
+		/**
+		 * The URL to change to when the language toggle button is clicked.
+		 *
+		 * This is optional.
+		 */
+		url;
+		/**
+		 * A custom function to pass to the language toggle button.
+		 *
+		 * This is optional.
+		 */
+		customLanguageToggle;
+		translations = translations;
+		/**
+		 * Internal state used as the source of truth for component language.
+		 */
+		languageState;
+		/**
+		 * Internal state used to render the text on the language toggle UI.
+		 */
+		oppositeLanguageLabel = undefined;
 		/**
 		 * Updates the language and languageState props when changes to the language prop are detected.
 		 */
@@ -48,6 +67,18 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 			}
 			this.setAppLanguageHandler();
 		}
+		/**
+		 * Event that fires during the setAppLanguageHandler() method.
+		 *
+		 * The event contains the current language (after language logic has already occurred).
+		 */
+		setAppLanguage;
+		/**
+		 * Event that fires when the language toggle is pressed/clicked.
+		 *
+		 * The event contains the oldLanguage along with the newLanguage.
+		 */
+		headerLanguageToggled;
 		/**
 		 * This function sets the languageState (if not already set).
 		 *
@@ -58,9 +89,8 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 		 * updateLanguage() method, which is fired on the watch for the language prop.
 		 */
 		setAppLanguageHandler() {
-			var _a;
 			const defaultLang = this.translations.siteLanguage.abbreviation.en;
-			const rootLang = (_a = getRootHTMLElement()) === null || _a === void 0 ? void 0 : _a.lang;
+			const rootLang = getRootHTMLElement()?.lang;
 			// If languageState is not set, set it equal to the following cadence:
 			// language prop value, <html> tag lang attribute, or default to "en"
 			if (!this.languageState) {
@@ -142,6 +172,15 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 				? this.translations.siteLanguage.fullWord.fr
 				: this.translations.siteLanguage.fullWord.en;
 		}
+		/*
+		 * Updates the <html> lang attribute based on component languageState.
+		 */
+		updateHTMLLang = () => {
+			const htmlElement = getRootHTMLElement();
+			if (htmlElement) {
+				htmlElement.setAttribute('lang', this.languageState);
+			}
+		};
 		/**
 		 * Component life cycle hook.
 		 *
@@ -187,43 +226,32 @@ const OntarioLanguageToggle = /*@__PURE__*/ proxyCustomElement(
 			}
 		}
 		render() {
-			var _a, _b, _c, _d, _e, _f, _g;
 			return h(
 				'a',
 				{
-					'key': 'f43e42110b4272a268801c310a8d14e31342f426',
-					'aria-label':
-						this.translations.languageToggle.ariaLabel[
-							`${(_a = this.oppositeLanguageLabel) === null || _a === void 0 ? void 0 : _a.abbreviation}`
-						],
+					'key': '2c4187c7dae4d03af41e7967b568cf361b3b5c59',
+					'aria-label': this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`],
 					'class':
 						this.size === 'default'
 							? 'ontario-language-toggler ontario-language-toggler--default'
 							: 'ontario-language-toggler ontario-language-toggler--small',
 					'href': this.url ? this.url : '#',
-					'hreflang': (_b = this.oppositeLanguageLabel) === null || _b === void 0 ? void 0 : _b.abbreviation,
-					'lang': (_c = this.oppositeLanguageLabel) === null || _c === void 0 ? void 0 : _c.abbreviation,
+					'hreflang': this.oppositeLanguageLabel?.abbreviation,
+					'lang': this.oppositeLanguageLabel?.abbreviation,
 					'onClick': (e) => this.handleHeaderLanguageToggled(this.languageState, e),
 				},
 				this.size === 'small'
-					? h('span', null, (_d = this.oppositeLanguageLabel) === null || _d === void 0 ? void 0 : _d.fullWord)
+					? h('span', null, this.oppositeLanguageLabel?.fullWord)
 					: h(
 							Fragment,
 							null,
 							h(
 								'abbr',
-								{
-									title: (_e = this.oppositeLanguageLabel) === null || _e === void 0 ? void 0 : _e.fullWord,
-									class: 'ontario-show-for-small-only',
-								},
-								(_f = this.oppositeLanguageLabel) === null || _f === void 0 ? void 0 : _f.abbreviation.toUpperCase(),
-							),
-							h(
-								'span',
-								{ class: 'ontario-show-for-medium' },
-								(_g = this.oppositeLanguageLabel) === null || _g === void 0 ? void 0 : _g.fullWord,
+								{ title: this.oppositeLanguageLabel?.fullWord, class: 'ontario-show-for-small-only' },
+								this.oppositeLanguageLabel?.abbreviation.toUpperCase(),
 							),
-					  ),
+							h('span', { class: 'ontario-show-for-medium' }, this.oppositeLanguageLabel?.fullWord),
+						),
 			);
 		}
 		static get watchers() {

package/dist/components/ontario-language-toggle2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-language-toggle2.js","mappings":"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","names":[],"sources":["src/utils/common/language-types.ts","src/components/ontario-language-toggle/ontario-language-toggle.scss?tag=ontario-language-toggle&encapsulation=shadow","src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"sourcesContent":["export const supportedLanguages = ['en', 'fr'] as const;\nexport type Language = (typeof supportedLanguages)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n.ontario-language-toggler {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tcolor: colours.$ontario-colour-white;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: typography.$ontario-font-open-sans;\n\theight: globalVariables.$standard-input-height;\n\tline-height: math.div(14, 9);\n\ttext-align: center;\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\tcolor: colours.$ontario-colour-white;\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tabbr[title] {\n\t\ttext-decoration: none;\n\t}\n}\n\n.ontario-language-toggler--default {\n\tpadding: spacing.$spacing-3;\n}\n\n.ontario-language-toggler--small {\n\tfont-size: globalFunctions.px-to-rem(16);\n\tline-height: globalFunctions.px-to-rem(22);\n\theight: auto;\n\toutline: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';\n\nimport { supportedLanguages, Language } from '../../utils/common/language-types';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray, getRootHTMLElement } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t/*\n\t The language of the component.\n\t \n\t In most cases, the language toggle should be the source of truth for determining the site language.\n\t \n\t Only pass a language value here if necessary.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t The size of the language toggle button.\n\t \n\t If no prop is passed, it will be set to the `default` size.\n\t /\n\t@Prop() size?: 'default' \| 'small' = 'default';\n\n\t/\n\t The URL to change to when the language toggle button is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) url?: string;\n\n\t/\n\t A custom function to pass to the language toggle button.\n\t \n\t This is optional.\n\t /\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Internal state used as the source of truth for component language.\n\t /\n\t@State() private languageState: Language;\n\n\t/\n\t Internal state used to render the text on the language toggle UI.\n\t /\n\t@State() private oppositeLanguageLabel: { fullWord: string; abbreviation: Language } \| undefined = undefined;\n\n\t/\n\t Updates the language and languageState props when changes to the language prop are detected.\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tif (this.language) {\n\t\t\tif (!validateValueAgainstArray(this.language, supportedLanguages)) {\n\t\t\t\tthis.showLanguageWarning(this.language);\n\t\t\t\tthis.language = this.translations.siteLanguage.abbreviation.en as Language;\n\t\t\t}\n\t\t\tthis.languageState = this.language;\n\t\t}\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Event that fires during the setAppLanguageHandler() method.\n\t \n\t The event contains the current language (after language logic has already occurred).\n\t /\n\t@Event() setAppLanguage: EventEmitter<Language>;\n\n\t/\n\t Event that fires when the language toggle is pressed/clicked.\n\t \n\t The event contains the oldLanguage along with the newLanguage.\n\t /\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\n\t/\n\t This function sets the languageState (if not already set).\n\t \n\t It also emits the setAppLanguage() event, updates the component language label, and\n\t * updates the <html> tag lang attribute with the languageState value.\n\t \n\t It gets called by the connectedCallback() component lifecycle hook, and by the\n\t * updateLanguage() method, which is fired on the watch for the language prop.\n\t /\n\tprivate setAppLanguageHandler() {\n\t\tconst defaultLang = this.translations.siteLanguage.abbreviation.en;\n\t\tconst rootLang = getRootHTMLElement()?.lang;\n\n\t\t// If languageState is not set, set it equal to the following cadence:\n\t\t// language prop value, <html> tag lang attribute, or default to \"en\"\n\t\tif (!this.languageState) {\n\t\t\tif (this.language) {\n\t\t\t\tthis.languageState = this.language;\n\t\t\t} else if (rootLang) {\n\t\t\t\tif (validateValueAgainstArray(rootLang, supportedLanguages)) {\n\t\t\t\t\tthis.languageState = rootLang as Language;\n\t\t\t\t} else {\n\t\t\t\t\tthis.showLanguageWarning(rootLang, 'document');\n\t\t\t\t\tthis.languageState = defaultLang;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.languageState = defaultLang;\n\t\t\t}\n\t\t}\n\n\t\tthis.setAppLanguage.emit(this.languageState);\n\n\t\tthis.oppositeLanguageLabel = {\n\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t};\n\n\t\tthis.updateHTMLLang();\n\t}\n\n\t/\n\t An event that emits to other components that the language toggle button has been toggled.\n\t \n\t @param {Language} oldLanguage - The language prior to the language toggle being pressed.\n\t * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).\n\t /\n\tprivate handleHeaderLanguageToggled(oldLanguage: Language, event?: globalThis.Event) {\n\t\tthis.languageState =\n\t\t\toldLanguage === this.translations.siteLanguage.abbreviation.en\n\t\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });\n\n\t\tthis.updateHTMLLang();\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t/\n\t Prints a warning message to the console about using an incorrect language for the component.\n\t \n\t @param {string} lang - The incorrect language that was received.\n\t * @param {string} type - prop/document \| Where the incorrect language is coming from.\n\t /\n\tprivate showLanguageWarning(lang: string, type: 'prop' \| 'document' = 'prop') {\n\t\tconst propOrDocumentMessage =\n\t\t\ttype === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addRegularText(propOrDocumentMessage)\n\t\t\t.addRegularText('is not a valid language value for the ')\n\t\t\t.addMonospaceText(' <ontario-language-toggle> ')\n\t\t\t.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)\n\t\t\t.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)\n\t\t\t.printMessage();\n\t}\n\n\t/\n\t Returns abbreviated text for the opposite language.\n\t \n\t @returns {Language}\n\t /\n\tprivate getOppositeLanguageAbbrievation(): Language {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\t}\n\n\t/\n\t Returns full word text for the opposite language.\n\t \n\t @returns {string}\n\t /\n\tprivate getOppositeLanguageFullWord(): string {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.fullWord.fr\n\t\t\t: this.translations.siteLanguage.fullWord.en;\n\t}\n\n\t/\n\t * Updates the <html> lang attribute based on component languageState.\n\t /\n\tprivate updateHTMLLang = () => {\n\t\tconst htmlElement = getRootHTMLElement();\n\n\t\tif (htmlElement) {\n\t\t\thtmlElement.setAttribute('lang', this.languageState);\n\t\t}\n\t};\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t /\n\tconnectedCallback() {\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#componentdidload\n\t /\n\tcomponentDidLoad() {\n\t\t/\n\t\t Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.\n\t\t \n\t\t When changes occur, the oppositeLanguageLabel state variable regenerates.\n\t\t \n\t\t This is to act as a form of callback and create a subtle delay between page content\n\t\t * updating and the language toggle label updating.\n\t\t */\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tswitch (mutation.type) {\n\t\t\t\t\tcase 'attributes':\n\t\t\t\t\t\tswitch (mutation.attributeName) {\n\t\t\t\t\t\t\tcase 'lang':\n\t\t\t\t\t\t\t\tthis.oppositeLanguageLabel = {\n\t\t\t\t\t\t\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\t\t\t\t\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Only create/trigger the MutationObserver if the <html> element exists.\n\t\tif (getRootHTMLElement()) {\n\t\t\tconst options = { attributes: true };\n\t\t\tobserver.observe(getRootHTMLElement(), options);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<a\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`]}\n\t\t\t\tclass={\n\t\t\t\t\tthis.size === 'default'\n\t\t\t\t\t\t? 'ontario-language-toggler ontario-language-toggler--default'\n\t\t\t\t\t\t: 'ontario-language-toggler ontario-language-toggler--small'\n\t\t\t\t}\n\t\t\t\thref={this.url ? this.url : '#'}\n\t\t\t\threflang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tlang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.languageState, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={this.oppositeLanguageLabel?.fullWord} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{this.oppositeLanguageLabel?.abbreviation.toUpperCase()}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-language-toggle2.js","mappings":"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","names":[],"sources":["src/utils/common/language-types.ts","src/components/ontario-language-toggle/ontario-language-toggle.scss?tag=ontario-language-toggle&encapsulation=shadow","src/components/ontario-language-toggle/ontario-language-toggle.tsx"],"sourcesContent":["export const supportedLanguages = ['en', 'fr'] as const;\nexport type Language = (typeof supportedLanguages)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n.ontario-language-toggler {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tcolor: colours.$ontario-colour-white;\n\tcursor: pointer;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: fonts.$ontario-font-open-sans;\n\theight: globalVariables.$standard-input-height;\n\tline-height: math.div(14, 9);\n\ttext-align: center;\n\ttext-decoration: none;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\tcolor: colours.$ontario-colour-white;\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tabbr[title] {\n\t\ttext-decoration: none;\n\t}\n}\n\n.ontario-language-toggler--default {\n\tpadding: spacing.$spacing-3;\n}\n\n.ontario-language-toggler--small {\n\tfont-size: globalFunctions.px-to-rem(16);\n\tline-height: globalFunctions.px-to-rem(22);\n\theight: auto;\n\toutline: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n}\n","import { Component, Prop, State, Event, EventEmitter, Watch, h, Fragment } from '@stencil/core';\n\nimport { supportedLanguages, Language } from '../../utils/common/language-types';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { HeaderLanguageToggleEventDetails } from '../../utils/events/common-events.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray, getRootHTMLElement } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-language-toggle',\n\tstyleUrl: 'ontario-language-toggle.scss',\n\tshadow: true,\n})\nexport class OntarioLanguageToggle {\n\t/*\n\t The language of the component.\n\t \n\t In most cases, the language toggle should be the source of truth for determining the site language.\n\t \n\t Only pass a language value here if necessary.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t The size of the language toggle button.\n\t \n\t If no prop is passed, it will be set to the `default` size.\n\t /\n\t@Prop() size?: 'default' \| 'small' = 'default';\n\n\t/\n\t The URL to change to when the language toggle button is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop({ mutable: true }) url?: string;\n\n\t/\n\t A custom function to pass to the language toggle button.\n\t \n\t This is optional.\n\t /\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Internal state used as the source of truth for component language.\n\t /\n\t@State() private languageState: Language;\n\n\t/\n\t Internal state used to render the text on the language toggle UI.\n\t /\n\t@State() private oppositeLanguageLabel: { fullWord: string; abbreviation: Language } \| undefined = undefined;\n\n\t/\n\t Updates the language and languageState props when changes to the language prop are detected.\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tif (this.language) {\n\t\t\tif (!validateValueAgainstArray(this.language, supportedLanguages)) {\n\t\t\t\tthis.showLanguageWarning(this.language);\n\t\t\t\tthis.language = this.translations.siteLanguage.abbreviation.en as Language;\n\t\t\t}\n\t\t\tthis.languageState = this.language;\n\t\t}\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Event that fires during the setAppLanguageHandler() method.\n\t \n\t The event contains the current language (after language logic has already occurred).\n\t /\n\t@Event() setAppLanguage: EventEmitter<Language>;\n\n\t/\n\t Event that fires when the language toggle is pressed/clicked.\n\t \n\t The event contains the oldLanguage along with the newLanguage.\n\t /\n\t@Event() headerLanguageToggled: EventEmitter<HeaderLanguageToggleEventDetails>;\n\n\t/\n\t This function sets the languageState (if not already set).\n\t \n\t It also emits the setAppLanguage() event, updates the component language label, and\n\t * updates the <html> tag lang attribute with the languageState value.\n\t \n\t It gets called by the connectedCallback() component lifecycle hook, and by the\n\t * updateLanguage() method, which is fired on the watch for the language prop.\n\t /\n\tprivate setAppLanguageHandler() {\n\t\tconst defaultLang = this.translations.siteLanguage.abbreviation.en;\n\t\tconst rootLang = getRootHTMLElement()?.lang;\n\n\t\t// If languageState is not set, set it equal to the following cadence:\n\t\t// language prop value, <html> tag lang attribute, or default to \"en\"\n\t\tif (!this.languageState) {\n\t\t\tif (this.language) {\n\t\t\t\tthis.languageState = this.language;\n\t\t\t} else if (rootLang) {\n\t\t\t\tif (validateValueAgainstArray(rootLang, supportedLanguages)) {\n\t\t\t\t\tthis.languageState = rootLang as Language;\n\t\t\t\t} else {\n\t\t\t\t\tthis.showLanguageWarning(rootLang, 'document');\n\t\t\t\t\tthis.languageState = defaultLang;\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.languageState = defaultLang;\n\t\t\t}\n\t\t}\n\n\t\tthis.setAppLanguage.emit(this.languageState);\n\n\t\tthis.oppositeLanguageLabel = {\n\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t};\n\n\t\tthis.updateHTMLLang();\n\t}\n\n\t/\n\t An event that emits to other components that the language toggle button has been toggled.\n\t \n\t @param {Language} oldLanguage - The language prior to the language toggle being pressed.\n\t * @param {globalThis.Event} event - event that triggered the function (e.g. onclick).\n\t /\n\tprivate handleHeaderLanguageToggled(oldLanguage: Language, event?: globalThis.Event) {\n\t\tthis.languageState =\n\t\t\toldLanguage === this.translations.siteLanguage.abbreviation.en\n\t\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\n\t\tthis.headerLanguageToggled.emit({ oldLanguage: oldLanguage, newLanguage: this.languageState });\n\n\t\tthis.updateHTMLLang();\n\n\t\tif (this.customLanguageToggle && event) {\n\t\t\tthis.customLanguageToggle(event);\n\t\t}\n\t}\n\n\t/\n\t Prints a warning message to the console about using an incorrect language for the component.\n\t \n\t @param {string} lang - The incorrect language that was received.\n\t * @param {string} type - prop/document \| Where the incorrect language is coming from.\n\t /\n\tprivate showLanguageWarning(lang: string, type: 'prop' \| 'document' = 'prop') {\n\t\tconst propOrDocumentMessage =\n\t\t\ttype === 'prop' ? `The language prop value of ${lang} ` : `The HTML document lang attribute value of ${lang} `;\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addRegularText(propOrDocumentMessage)\n\t\t\t.addRegularText('is not a valid language value for the ')\n\t\t\t.addMonospaceText(' <ontario-language-toggle> ')\n\t\t\t.addRegularText(`component. Valid language values are ${printArray([...supportedLanguages])}. `)\n\t\t\t.addRegularText(`A default language value of ${this.translations.siteLanguage.abbreviation.en} will be applied.`)\n\t\t\t.printMessage();\n\t}\n\n\t/\n\t Returns abbreviated text for the opposite language.\n\t \n\t @returns {Language}\n\t /\n\tprivate getOppositeLanguageAbbrievation(): Language {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.abbreviation.fr\n\t\t\t: this.translations.siteLanguage.abbreviation.en;\n\t}\n\n\t/\n\t Returns full word text for the opposite language.\n\t \n\t @returns {string}\n\t /\n\tprivate getOppositeLanguageFullWord(): string {\n\t\treturn this.languageState === this.translations.siteLanguage.abbreviation.en\n\t\t\t? this.translations.siteLanguage.fullWord.fr\n\t\t\t: this.translations.siteLanguage.fullWord.en;\n\t}\n\n\t/\n\t * Updates the <html> lang attribute based on component languageState.\n\t /\n\tprivate updateHTMLLang = () => {\n\t\tconst htmlElement = getRootHTMLElement();\n\n\t\tif (htmlElement) {\n\t\t\thtmlElement.setAttribute('lang', this.languageState);\n\t\t}\n\t};\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t /\n\tconnectedCallback() {\n\t\tthis.setAppLanguageHandler();\n\t}\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#componentdidload\n\t /\n\tcomponentDidLoad() {\n\t\t/\n\t\t Creates a MutationObserver (a type of watch) on the <html> tag lang attribute.\n\t\t \n\t\t When changes occur, the oppositeLanguageLabel state variable regenerates.\n\t\t \n\t\t This is to act as a form of callback and create a subtle delay between page content\n\t\t * updating and the language toggle label updating.\n\t\t */\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tswitch (mutation.type) {\n\t\t\t\t\tcase 'attributes':\n\t\t\t\t\t\tswitch (mutation.attributeName) {\n\t\t\t\t\t\t\tcase 'lang':\n\t\t\t\t\t\t\t\tthis.oppositeLanguageLabel = {\n\t\t\t\t\t\t\t\t\tfullWord: this.getOppositeLanguageFullWord(),\n\t\t\t\t\t\t\t\t\tabbreviation: this.getOppositeLanguageAbbrievation(),\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tbreak;\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Only create/trigger the MutationObserver if the <html> element exists.\n\t\tif (getRootHTMLElement()) {\n\t\t\tconst options = { attributes: true };\n\t\t\tobserver.observe(getRootHTMLElement(), options);\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<a\n\t\t\t\taria-label={this.translations.languageToggle.ariaLabel[`${this.oppositeLanguageLabel?.abbreviation}`]}\n\t\t\t\tclass={\n\t\t\t\t\tthis.size === 'default'\n\t\t\t\t\t\t? 'ontario-language-toggler ontario-language-toggler--default'\n\t\t\t\t\t\t: 'ontario-language-toggler ontario-language-toggler--small'\n\t\t\t\t}\n\t\t\t\thref={this.url ? this.url : '#'}\n\t\t\t\threflang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tlang={this.oppositeLanguageLabel?.abbreviation}\n\t\t\t\tonClick={(e) => this.handleHeaderLanguageToggled(this.languageState, e)}\n\t\t\t>\n\t\t\t\t{this.size === 'small' ? (\n\t\t\t\t\t<span>{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t) : (\n\t\t\t\t\t<Fragment>\n\t\t\t\t\t\t<abbr title={this.oppositeLanguageLabel?.fullWord} class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t{this.oppositeLanguageLabel?.abbreviation.toUpperCase()}\n\t\t\t\t\t\t</abbr>\n\t\t\t\t\t\t<span class=\"ontario-show-for-medium\">{this.oppositeLanguageLabel?.fullWord}</span>\n\t\t\t\t\t</Fragment>\n\t\t\t\t)}\n\t\t\t</a>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-loading-indicator.js CHANGED Viewed

@@ -1,27 +1,51 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { v as validateLanguage, a as validateValueAgainstArray } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
-import { t as translations } from './global.i18n.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { v as validateLanguage, a as validateValueAgainstArray } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { t as translations } from './p-a5331e15.js';
 const ontarioLoadingIndicatorCss =
 	'.ontario-loading-indicator__overlay,.ontario-loading-indicator__overlay--within-container{position:fixed;width:100%;left:0;right:0;top:0;bottom:0;background-color:rgba(255, 255, 255, 0.7);z-index:9999}.ontario-loading-indicator__overlay[aria-hidden=false],.ontario-loading-indicator__overlay--within-container[aria-hidden=false]{display:block}.ontario-loading-indicator__overlay[aria-hidden=true],.ontario-loading-indicator__overlay--within-container[aria-hidden=true]{display:none}.ontario-loading-indicator__overlay--within-container{position:absolute}.ontario-loading-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);width:100%;height:100%}.ontario-loading-indicator p{color:#4d4d4d;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;line-height:1.5;font-weight:700;word-spacing:0.025rem;margin:0.75rem 0 0}.ontario-loading-indicator__spinner{animation:rotator 1.5s linear infinite;width:3rem;height:3rem;overflow:visible}.ontario-loading-indicator__spinner circle{stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round;stroke:#4d4d4d;animation:dash 1.5s ease-in-out infinite}@keyframes rotator{100%{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35px}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124px}}';
 const OntarioLoadingIndicatorStyle0 = ontarioLoadingIndicatorCss;
 const OntarioLoadingIndicator$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioLoadingIndicator extends HTMLElement {
+	class OntarioLoadingIndicator extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.type = 'large';
-			this.isLoading = false;
-			this.message = undefined;
-			this.fullScreenOverlay = true;
-			this.language = undefined;
-			this.translations = translations;
-			this.isLoadingState = undefined;
-			this.typeState = undefined;
 		}
+		/**
+		 * The type of loading indicator to render.
+		 */
+		type = 'large';
+		/**
+		 * A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.
+		 */
+		isLoading = false;
+		/**
+		 * The message that tells the user what is happening or why the user is waiting.
+		 * If no message prop is passed, it will default to "Loading". Translations for this default message are included.
+		 *
+		 * This is optional.
+		 */
+		message;
+		/**
+		 * A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.
+		 *
+		 * If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.
+		 */
+		fullScreenOverlay = true;
+		/**
+		 * The language of the component.
+		 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.
+		 */
+		language;
+		translations = translations;
+		/**
+		 * Mutable variables, for internal use only.
+		 */
+		isLoadingState;
+		typeState;
 		/**
 		 * 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.
 		 */
@@ -78,7 +102,6 @@ const OntarioLoadingIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 			this.isLoadingState = this.isLoading;
 		}
 		render() {
-			var _a;
 			return this.typeState === 'large'
 				? h(
 						'div',
@@ -102,13 +125,9 @@ const OntarioLoadingIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 								},
 								h('circle', { 'cx': '50', 'cy': '50', 'r': '20', 'fill': 'none', 'stroke-width': '4' }),
 							),
-							h(
-								'p',
-								null,
-								(_a = this.message) !== null && _a !== void 0 ? _a : this.translations.loading[`${this.language}`],
-							),
+							h('p', null, this.message ?? this.translations.loading[`${this.language}`]),
 						),
-				  )
+					)
 				: h('p', null, 'The small loading indicator is still under development.');
 		}
 		static get watchers() {

package/dist/components/ontario-loading-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-loading-indicator.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,i7CAAi7C,CAAC;AACr9C,sCAAe,0BAA0B;;MCY5BA,yBAAuB~~;;;;;oBAID~~,OAAO~~;yBAKZ~~,KAAK~~;;iCAeI~~,IAAI~~;;4BAQb~~,YAAY~~;;;;;;;IAYzC~~,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAMD,gBAAgB,CAAC,YAAqB;QACrC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;KACnC;;;;;;;IASD,YAAY;QACX,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QACzE,IAAI,OAAO,EAAE;YACZ,QAAQ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;SACpC;aAAM;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE;SAClC;KACD;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,QAAQ,CAAC;aAC1B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,+BAA+B,CAAC;aACjD,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;KACjB;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;KACrC;IAED,MAAM;;QACL,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,IAChC,WACC,KAAK,EACJ,IAAI,CAAC,iBAAiB;kBACnB,oCAAoC;kBACpC,sDAAsD,iBAE7C,IAAI,CAAC,cAAc,GAAG,OAAO,GAAG,MAAM,EACnD,IAAI,EAAC,OAAO,eACF,WAAW,IAErB,WAAK,KAAK,EAAC,2BAA2B,IACrC,WAAK,KAAK,EAAC,oCAAoC,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IACvG,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,kBAAc,GAAG,GAAG,CACzD,EACN,aAAI,~~MAAA,~~IAAI,CAAC,OAAO,~~mCAAI~~,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAK,CACjE,CACD,KAEN,uEAA8D,CAC9D,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioLoadingIndicator"],"sources":["src/components/ontario-loading-indicator/ontario-loading-indicator.scss?tag=ontario-loading-indicator&encapsulation=shadow","src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/~~typography~~.variables' as ~~typography~~;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n$offset: 1, 200;\n$duration: 1.5s;\n$spinner-size: 3rem;\n$dasharray: 89, 200;\n$loading-indicator-z-index: 9999;\n\n.ontario-loading-indicator__overlay,\n.ontario-loading-indicator__overlay--within-container {\n\tposition: fixed;\n\twidth: 100%;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tbackground-color: rgba(colours.$ontario-colour-white, 0.7);\n\tz-index: $loading-indicator-z-index;\n\n\t&[aria-hidden='false'] {\n\t\tdisplay: block;\n\t}\n\n\t&[aria-hidden='true'] {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-loading-indicator__overlay--within-container {\n\tposition: absolute;\n}\n\n.ontario-loading-indicator {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 100%;\n\theight: 100%;\n\n\tp {\n\t\tcolor: colours.$ontario-greyscale-70;\n\t\tfont-family: ~~typography~~.$ontario-font-raleway~~-modified~~;\n\t\tfont-size: globalFunctions.px-to-rem(16);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tword-spacing: 0.025rem;\n\t\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-loading-indicator__spinner {\n\tanimation: rotator $duration linear infinite;\n\twidth: $spinner-size;\n\theight: $spinner-size;\n\toverflow: visible;\n\n\tcircle {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t\tstroke-linecap: round;\n\t\tstroke: colours.$ontario-greyscale-70;\n\t\tanimation: dash $duration ease-in-out infinite;\n\t}\n}\n\n@keyframes rotator {\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes dash {\n\t0% {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t}\n\n\t50% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -35px;\n\t}\n\n\t100% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -124px;\n\t}\n}\n","import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/*\n\t The type of loading indicator to render.\n\t /\n\t@Prop() type: 'small' \| 'large' = 'large';\n\n\t/\n\t A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t /\n\t@Prop() isLoading: boolean = false;\n\n\t/\n\t The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t \n\t This is optional.\n\t /\n\t@Prop() message?: string;\n\n\t/\n\t A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t \n\t If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t /\n\t@Prop() fullScreenOverlay?: boolean = true;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Mutable variables, for internal use only.\n\t /\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' \| 'large';\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes in the `isLoading` prop.\n\t /\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/\n\t Watch for changes in the `type` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-loading-indicator.js","mappings":";;;;;AAAA,MAAM,0BAA0B,GAAG,i7CAAi7C,CAAC;AACr9C,sCAAe,0BAA0B;;MCY5BA,yBAAuB;;;;;;;;;IAI3B,IAAI,GAAsB,OAAO,CAAC;;;;IAKlC,SAAS,GAAY,KAAK,CAAC;;;;;;;IAQ3B,OAAO,CAAU;;;;;;IAOjB,iBAAiB,GAAa,IAAI,CAAC;;;;;IAMlB,QAAQ,CAAY;IAEpC,YAAY,GAAQ,YAAY,CAAC;;;;IAKzB,cAAc,CAAU;IACxB,SAAS,CAAoB;;;;IAM9C,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;;;;IAMD,gBAAgB,CAAC,YAAqB;QACrC,IAAI,CAAC,cAAc,GAAG,YAAY,CAAC;KACnC;;;;;;;IASD,YAAY;QACX,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;QACzE,IAAI,OAAO,EAAE;YACZ,QAAQ,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE;SACpC;aAAM;YACN,IAAI,CAAC,eAAe,EAAE,CAAC;YACvB,QAAQ,IAAI,CAAC,SAAS,GAAG,OAAO,EAAE;SAClC;KACD;;;;;IAMO,eAAe;QACtB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,QAAQ,CAAC;aAC1B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,+BAA+B,CAAC;aACjD,cAAc,CAAC,kCAAkC,CAAC;aAClD,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,iCAAiC,CAAC;aACjD,gBAAgB,CAAC,SAAS,CAAC;aAC3B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;KACjB;IAED,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAChD,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC;KACrC;IAED,MAAM;QACL,OAAO,IAAI,CAAC,SAAS,KAAK,OAAO,IAChC,WACC,KAAK,EACJ,IAAI,CAAC,iBAAiB;kBACnB,oCAAoC;kBACpC,sDAAsD,iBAE7C,IAAI,CAAC,cAAc,GAAG,OAAO,GAAG,MAAM,EACnD,IAAI,EAAC,OAAO,eACF,WAAW,IAErB,WAAK,KAAK,EAAC,2BAA2B,IACrC,WAAK,KAAK,EAAC,oCAAoC,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IACvG,cAAQ,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,kBAAc,GAAG,GAAG,CACzD,EACN,aAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAK,CACjE,CACD,KAEN,uEAA8D,CAC9D,CAAC;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioLoadingIndicator"],"sources":["src/components/ontario-loading-indicator/ontario-loading-indicator.scss?tag=ontario-loading-indicator&encapsulation=shadow","src/components/ontario-loading-indicator/ontario-loading-indicator.tsx"],"sourcesContent":["@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineHeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n$offset: 1, 200;\n$duration: 1.5s;\n$spinner-size: 3rem;\n$dasharray: 89, 200;\n$loading-indicator-z-index: 9999;\n\n.ontario-loading-indicator__overlay,\n.ontario-loading-indicator__overlay--within-container {\n\tposition: fixed;\n\twidth: 100%;\n\tleft: 0;\n\tright: 0;\n\ttop: 0;\n\tbottom: 0;\n\tbackground-color: rgba(colours.$ontario-colour-white, 0.7);\n\tz-index: $loading-indicator-z-index;\n\n\t&[aria-hidden='false'] {\n\t\tdisplay: block;\n\t}\n\n\t&[aria-hidden='true'] {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-loading-indicator__overlay--within-container {\n\tposition: absolute;\n}\n\n.ontario-loading-indicator {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tposition: absolute;\n\ttop: 50%;\n\ttransform: translateY(-50%);\n\twidth: 100%;\n\theight: 100%;\n\n\tp {\n\t\tcolor: colours.$ontario-greyscale-70;\n\t\tfont-family: fonts.$ontario-font-raleway;\n\t\tfont-size: globalFunctions.px-to-rem(16);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tword-spacing: 0.025rem;\n\t\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-loading-indicator__spinner {\n\tanimation: rotator $duration linear infinite;\n\twidth: $spinner-size;\n\theight: $spinner-size;\n\toverflow: visible;\n\n\tcircle {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t\tstroke-linecap: round;\n\t\tstroke: colours.$ontario-greyscale-70;\n\t\tanimation: dash $duration ease-in-out infinite;\n\t}\n}\n\n@keyframes rotator {\n\t100% {\n\t\ttransform: rotate(360deg);\n\t}\n}\n\n@keyframes dash {\n\t0% {\n\t\tstroke-dasharray: $offset;\n\t\tstroke-dashoffset: 0;\n\t}\n\n\t50% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -35px;\n\t}\n\n\t100% {\n\t\tstroke-dasharray: $dasharray;\n\t\tstroke-dashoffset: -124px;\n\t}\n}\n","import { Component, h, Prop, Listen, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-loading-indicator',\n\tstyleUrl: 'ontario-loading-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioLoadingIndicator {\n\t/*\n\t The type of loading indicator to render.\n\t /\n\t@Prop() type: 'small' \| 'large' = 'large';\n\n\t/\n\t A boolean value to determine whether or not the loading indicator is loading (i.e: is visible) or not.\n\t /\n\t@Prop() isLoading: boolean = false;\n\n\t/\n\t The message that tells the user what is happening or why the user is waiting.\n\t * If no message prop is passed, it will default to \"Loading\". Translations for this default message are included.\n\t \n\t This is optional.\n\t /\n\t@Prop() message?: string;\n\n\t/\n\t A boolean value to determine whether the loading indicator overlay covers the full page or not. By default, this is set to `true`.\n\t \n\t If set to `false`, the loading indicator overlay will be positioned absolutely relative to its container. Note that this will only work if the containing element has a style rule specifying it to be positioned relatively.\n\t /\n\t@Prop() fullScreenOverlay?: boolean = true;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t/\n\t Mutable variables, for internal use only.\n\t /\n\t@State() private isLoadingState: boolean;\n\t@State() private typeState: 'small' \| 'large';\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t /\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/\n\t Watch for changes in the `isLoading` prop.\n\t /\n\t@Watch('isLoading')\n\tisLoadingChanged(newIsLoading: boolean) {\n\t\tthis.isLoadingState = newIsLoading;\n\t}\n\n\t/\n\t Watch for changes in the `type` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `type` will be set to its default (`large`).\n\t * If a match is found in one of the array values then `type` will be set to the matching array key value.\n\t /\n\t@Watch('type')\n\tvalidateType() {\n\t\tconst isValid = validateValueAgainstArray(this.type, ['large', 'small']);\n\t\tif (isValid) {\n\t\t\treturn (this.typeState = this.type);\n\t\t} else {\n\t\t\tthis.warnDefaultType();\n\t\t\treturn (this.typeState = 'large');\n\t\t}\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('large')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-loading-indicator> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' large or small ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' large ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateType();\n\t\tthis.isLoadingState = this.isLoading;\n\t}\n\n\trender() {\n\t\treturn this.typeState === 'large' ? (\n\t\t\t<div\n\t\t\t\tclass={\n\t\t\t\t\tthis.fullScreenOverlay\n\t\t\t\t\t\t? `ontario-loading-indicator__overlay`\n\t\t\t\t\t\t: `ontario-loading-indicator__overlay--within-container`\n\t\t\t\t}\n\t\t\t\taria-hidden={this.isLoadingState ? 'false' : 'true'}\n\t\t\t\trole=\"alert\"\n\t\t\t\taria-live=\"assertive\"\n\t\t\t>\n\t\t\t\t<div class=\"ontario-loading-indicator\">\n\t\t\t\t\t<svg class=\"ontario-loading-indicator__spinner\" viewBox=\"25 25 50 50\" xmlns=\"http://www.w3.org/2000/svg\">\n\t\t\t\t\t\t<circle cx=\"50\" cy=\"50\" r=\"20\" fill=\"none\" stroke-width=\"4\" />\n\t\t\t\t\t</svg>\n\t\t\t\t\t<p>{this.message ?? this.translations.loading[`${this.language}`]}</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t) : (\n\t\t\t<p>The small loading indicator is still under development.</p>\n\t\t);\n\t}\n}\n"],"version":3}