@ongov/ontario-design-system-component-library 5.0.0 → 6.0.0-alpha.2

package/dist/ontario-design-system-components/p-55002351.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ontarioAccordionCss","OntarioAccordion","name","expandCollapseButton","accordionData","isOpen","language","handleSetAppLanguage","event","this","validateLanguage","handleHeaderLanguageToggled","translations","expandCollapseLabel","internalExpandCollapseLabelDetails","internalAccordionData","openAccordionIndexes","parseAccordionData","Array","isArray","JSON","parse","updateLabel","parseExpandCollapseButtonDetails","toggleAccordion","index","includes","filter","i","toggleAll","length","map","_","allOpen","every","componentWillLoad","render","h","key","class","onClick","ariaLabelText","expandAllSectionsLabel","accordion","expand","collapseAllSectionsLabel","collapse","colour","label","accordionContentType","innerHTML","content","HeadingLevel","HighlightColours","HeadingContentTypes","isValidHighlightColour","isValidHeadingLevel","level","generateClasses","type","highlightColor","componentType","borderColor","generateHeading","headingType","headingContentType","headingContent","headingContentIsHTML","generateCalloutAside","highlightColour","contentIsString","ontarioAsideCss","OntarioAside","validateHeadingType","message","ConsoleMessageClass","addDesignSystemTag","addMonospaceText","addRegularText","printMessage","validateHeadingContentType","isValid","validateValueAgainstArray","warnDefaultType","validateHighlightColour","ontarioBackToTopCss","OntarioBackToTop","displayBackToTop","scrollYValue","showBackToTopButton","window","scrollY","scrollToTop","scrollTo","top","left","behavior","backToTop","ariaLabel","OntarioIconArrowUp","hasMultipleTrueValues","arr","count","obj","extractValuesByKey","objects","organizeObjectKeys","data","columns","item","newData","otherKeys","Object","keys","forEach","column","removeObjectsBySpecificKey","value","removedObjects","filteredObjects","push","isNumber","undefined","isNaN","Number","isEmpty","str","retrieveEnumKeys","enumObject","printArray","conjunctionType","reduce","text","array","getRootHTMLElement","document","getElementsByTagName","BadgeColourToClass","BadgeColours","ontarioBadgeCss","OntarioBadge","internals","validateLabel","getBadgeLabel","validateColour","setBadgeColour","badgeLabel","host","textContent","ontarioBlockquoteCss","OntarioBlockquote","quote","attribution","byline","shortQuoteLength","shortQuote","quoteState","validateQuote","validateQuoteContent","newValue","validatePropExists","componentDidLoad","observer","MutationObserver","mutations","mutation","options","attributes","observe","ButtonTypes","HtmlTypes","ontarioButtonCss","OntarioButton","htmlType","elementId","typeState","htmlTypeState","labelState","buttonRef","updateLabelContent","validateLabelContent","validateType","validateHtmlType","warnDefaultHtmlType","getClass","getId","addEventListener","form","requestSubmit","ref","el","id","ontarioCalloutCss","OntarioCallout","layoutDirectionDefinitions","headerColourDefinitions","headingLevelDefinitions","ontarioCardCss","OntarioCard","headingLevel","image","imageAltText","description","cardLink","layoutDirection","headerColour","horizontalImagePositionType","horizontalImageSizeType","cardState","validateLayoutDirection","printPropWarning","updateCardState","validateHeadingLevel","validateHeaderColour","propName","component","propValue","acceptableValues","defaultValue","cardStateCopy","getCardClasses","baseClass","descriptionClass","backgroundClass","trim","getCardHeadingClasses","getHref","href","alt","src","className","ontarioCardCollectionCss","OntarioCardCollection","cardsPerRow","cardsPerRowState","validateCardsPerRow","Input","autoComplete","placeholder","checked","required","onKeyDown","onInput","onChange","onBlur","onFocus","ariaInvalid","ariaDescribedBy","inputMode","props","CaptionTypes","MessageContentType","InputCaption","captionText","captionType","isLegend","componentTagName","constructor","caption","captionObject","toLocaleLowerCase","find","toLowerCase","validateCaption","getCaption","captionFor","hasHintExpander","disableRequiredFlag","captionContent","getRequiredFlagElement","getHintExpanderAccessibilityText","htmlFor","hasHintExpanderOnOption","multipleOptionsMessage","accessibility","moreInfo","checkboxHintExpander","singleOptionMessage","singleHintExpander","getRequiredFlagText","optional","messageType","UndefinedCaptionObject","UndefinedCaptionText","test","EmptyCaptionText","UndefinedCaptionType","IncorrectCaptionType","printConsoleMessage","requiredFlagText","constructHintTextObject","hintText","hintTextObject","hint","hintContentType","EventType","handleInputEvent","eventType","input","inputChangeEvent","inputFocusEvent","inputBlurEvent","inputInputEvent","customChangeFunction","customFocusFunction","customBlurFunction","customInputFunction","hostElement","emit","inputType","Change","HTMLInputElement","emitEvent","Focus","focused","Blur","element","detail","dispatchEvent","CustomEvent","composed","bubbles","ErrorMessage","error","hideError","role","ontarioCheckboxesCss","OntarioCheckboxes","hintTextRef","hintExpander","errorMessage","customOnChange","customOnBlur","customOnFocus","hintTextId","captionState","internalHintText","internalHintExpander","internalOptions","checkboxOnChange","checkboxOnBlur","checkboxOnFocus","inputErrorOccurred","parseHintText","parseHintExpander","parseOptions","validateOptions","validateObjectExists","validateName","updateCaptionState","tagName","updateLanguage","broadcastInputErrorOccurredEvent","handleEvent","target","changedOption","x","setFormValue","formData","currentValue","append","FormData","getHintTextId","checkbox","e","ontarioCriticalAlertCss","OntarioCriticalAlert","validateCriticalAlertContent","renderContent","OntarioIconCriticalAlertWarning","byteToHex","toString","slice","unsafeStringify","offset","getRandomValues","rnds8","Uint8Array","rng","crypto","Error","bind","randomUUID","native","v4","buf","rnds","random","accessibilityLabel","handleInputInput","handleInputChange","handleInputFocus","handleInputBlur","CommonInput","DAY_MIN_VALUE","DAY_MAX_VALUE","MONTH_MIN_VALUE","MONTH_MAX_VALUE","YEAR_MIN_VALUE","YEAR_MAX_VALUE","isInvalidDay","day","isInvalidMonth","month","isInvalidYear","minYear","maxYear","year","getDateErrorMessage","dayValue","monthValue","yearValue","errorMessages","dayVisible","monthVisible","yearVisible","emptyDay","emptyMonth","emptyYear","emptyDayAndMonth","emptyDayAndYear","emptyMonthAndYear","invalidDate","invalidDay","invalidMonth","invalidYear","dayInvalid","monthInvalid","yearInvalid","isDayEmpty","isMonthEmpty","isYearEmpty","isDayInvalid","isMonthInvalid","isYearInvalid","getVisibleDateFields","dateOptions","ontarioDateInputCss","OntarioDateInput","dateValidator","inputOnInput","inputOnChange","inputOnBlur","inputOnFocus","inputId","handleComponentBlur","dateOptionsState","isDateTyped","dateInput","getLanguage","placeholderState","processPlaceholder","processDateOptions","isString","stack","ConsoleType","isInvalidDate","resetErrorState","updateDateState","inputFieldType","handleDateUpdates","fieldType","desiredDate","Date","UTC","parseInt","toISOString","handleDateInput","handleDateChanged","handleDateFocus","handleDateBlur","getInputIds","dayId","monthId","yearId","uuid","dateStrings","placeholderText","getImageAssetSrcPath","imageName","assetBasePath","replace","getAssetPath","console","warn","ontarioDropdownListCss","OntarioDropdownList","isEmptyStartOption","dropdownOnChange","dropdownOnBlur","dropdownOnFocus","validateSelectedOption","selected","singleOption","hasOwnProperty","getDropdownArrow","backgroundImage","style","dropdownList","select","dropdown","ontarioFieldsetCss","OntarioFieldset","legend","legendSize","validateLegendSize","validateLegend","validateLegendText","ICON_WIDTH","FooterSocialLinks","facebook","twitter","instagram","youtube","enDash","SimpleFooter","accessibilityLink","privacyLink","contactLink","printerLink","termsOfUseLink","String","getFullYear","ColumnContent","heading","Heading","html","list","Fragment","FooterColumn","socialLinks","isThreeColLayout","isFullWidthInMediumLayout","title","button","threeColumnLayoutClasses","mediumLayoutClasses","link","ExpandedFooterWrapper","children","topMargin","footerLinks","backgroundImagePath","marginClass","isInvalidTwoColumnOptions","column1","column2","isInvalidThreeColumnOptions","column3","ontarioFooterCss","OntarioFooter","twoColumnOptions","threeColumnOptions","footerLinksState","socialLinksState","twoColumnState","threeColumnState","processFooterLinks","processSocialLinks","processTwoColumnOptions","verifyTwoColumnOptions","processThreeColumnOptions","verifyThreeColumnOptions","isTwoColumnLayout","isThreeColumnLayout","isExpandedLayout","optionType","getBackgroundImagePath","supergraphicLogoFile","getFooterClasses","classes","getFooterLinks","links","contactUs","termsOfUse","ontarioHeaderCss","ontarioApplicationHeaderCss","serviceOntarioHeaderCss","OntarioHeader","applicationHeaderInfo","menuItems","disableDynamicMenu","languageToggleOptions","customLanguageToggle","applicationHeaderInfoState","menuItemState","isDynamicMenu","languageState","menuToggle","searchToggle","header","menuButton","menuButtonDesktop","menuButtonTablet","menuButtonMobile","searchBar","searchButton","parseApplicationHeaderInfo","parseMenuItems","isEnglish","OntarioHeaderDefaultData","en","fr","parseLanguage","handleClick","composedPath","handleLanguageToggle","newLanguage","handleMenuToggle","handleSearchToggle","handleSubmit","preventDefault","location","ontarioSearchURL","trapMenuFocus","dataType","dataset","focus","fetchOntarioMenu","apiUrl","config","ONTARIO_HEADER_API_URL_EN","ONTARIO_HEADER_API_URL_FR","response","fetch","then","json","linkset","catch","externalMenuItems","generateMenuItem","linkIsActive","liClass","renderMenuButton","viewportSize","isMenuVisible","closeMenu","openMenu","OntarioIconClose","OntarioIconMenu","generateNavigationLinks","lastLink","onClickHandler","onEscapePressed","path","maxSubheaderMobileLinks","maxSubheaderTabletLinks","maxSubheaderDesktopLinks","numOfMenuItems","componentDidRender","componentDidUpdate","blur","isServiceOntarioType","logoLink","logoAltText","onSubmit","novalidate","search","clearSearchField","submit","OntarioIconSearch","url","frenchLink","englishLink","size","OntarioIconSearchWhite","closeSearch","close","activeLinkRegex","pathname","serviceOntario","ontarioHintExpanderCss","OntarioHintExpander","hintState","toggleExpanderEvent","checkHintContentType","updateHintContent","validateHint","validateContent","ev","hintExpanderParent","parentElement","classList","toggle","querySelector","contains","setAttribute","ontarioHintTextCss","OntarioHintText","validateHintContent","part","ontarioIconCss","OntarioIconAccessibility","iconWidth","iconWidthState","validateWidth","iconColourState","iconCustomColourState","IconColours","validateColor","warnDefaultColour","width","fill","stroke","xmlns","viewBox","d","OntarioIconAlertError","hasAttribute","OntarioIconAlertInformation","OntarioIconAlertSuccess","OntarioIconAlertWarning","OntarioIconCamera","OntarioIconChevronDown","OntarioIconChevronLeft","OntarioIconChevronUp","OntarioIconEmail","OntarioIconHelp","OntarioIconMastercard","cx","cy","r","OntarioIconNotification","OntarioIconPrint","OntarioIconSentiment5","OntarioIconTextMessage","OntarioIconTransportBus","ontarioInputCss","OntarioInput","inputWidth","enableLiveValidation","inputValidator","customOnInput","requiredValidationMessage","hasBeenInteractedWith","globalTranslations","handleValueChange","validationResult","requiredFieldError","getComponentLanguage","getValue","supportedLanguages","ontarioLanguageToggleCss","OntarioLanguageToggle","oppositeLanguageLabel","showLanguageWarning","siteLanguage","abbreviation","setAppLanguageHandler","setAppLanguage","headerLanguageToggled","defaultLang","rootLang","lang","fullWord","getOppositeLanguageFullWord","getOppositeLanguageAbbrievation","updateHTMLLang","oldLanguage","propOrDocumentMessage","htmlElement","connectedCallback","attributeName","languageToggle","hreflang","toUpperCase","ontarioLoadingIndicatorCss","OntarioLoadingIndicator","isLoading","fullScreenOverlay","isLoadingState","isLoadingChanged","newIsLoading","loading","ontarioPageAlertCss","OntarioPageAlert","renderIcon","iconProps","body","ontarioRadioButtonsCss","OntarioRadioButtons","radioOnChange","radioOnBlur","radioOnFocus","radioOption","ontarioSearchBoxCss","OntarioSearchBox","inputFieldRef","performSearch","searchOnSubmit","handleSearch","setFocus","inputRef","handleFocus","searchInputFieldId","ontarioStepIndicatorCss","OntarioStepIndicator","showBackButton","backButtonUrl","currentStep","numberOfSteps","percentageComplete","customOnClick","handleCustomOnClick","stepIndicator","back","complete","step","of","minimumGridColumns","maximumGridColumns","validateTableColumns","colSpan","validateTableRowOptions","option","ontarioTableCss","OntarioTable","tableScrollWrapper","tableScrollDiv","table","tableColumns","tableData","zebraStripes","condensed","fullWidth","tableColumnsState","tableDataState","tableFooterState","processTableColumns","processTableData","transformTableData","organizedTableData","updatedTableData","tableFooterData","getZebraStripeClass","getTableClasses","tableClass","zebraStripesClass","getColumnClasses","columnData","generateTableDataHTML","rowData","rowClass","tdClass","scope","highlight","applyScrollbar","tableElement","scrollerDiv","visibility","height","scrollWidth","tables","scrollerDivs","scrollerWrappers","resizeObserver","ResizeObserver","scrollLeft","columnClass","subtotal","footerData","TaskStatuses","TaskToBadgeColour","NotStarted","InProgress","Completed","CannotStartYet","Optional","ontarioTaskCss","OntarioTask","taskId","deactivateLink","taskStatus","taskStatusState","validateTaskStatus","validStatuses","values","isValidStatus","warnAndGetDefaultTaskStatus","join","allowedValues","getBadgeColour","getTranslatedTaskStatus","resolvedLanguage","renderHintText","Boolean","renderTaskContent","headingProps","taskElement","shadowRoot","isLinkActive","taskStatusClass","taskContent","ontarioTaskListCss","OntarioTaskList","completedTasks","totalTasks","static","countTasks","slot","tasks","assignedElements","task","status","getAttribute","customElements","whenDefined","setTimeout","TASK_COUNT_DELAY_MS","_mutations","childList","subtree","attributeFilter","taskGroup","completed","outOf","ontarioTextareaCss","OntarioTextarea"],"sources":["src/components/ontario-accordion/ontario-accordion.scss?tag=ontario-accordion&encapsulation=shadow","src/components/ontario-accordion/ontario-accordion.tsx","src/utils/components/callout-aside/callout-aside.interface.ts","src/utils/components/callout-aside/callout-aside-helpers.tsx","src/components/ontario-aside/ontario-aside.scss?tag=ontario-aside&encapsulation=shadow","src/components/ontario-aside/ontario-aside.tsx","src/components/ontario-back-to-top/ontario-back-to-top.scss?tag=ontario-back-to-top&encapsulation=shadow","src/components/ontario-back-to-top/ontario-back-to-top.tsx","src/utils/helper/utils.ts","src/components/ontario-badge/ontario-badge.types.ts","src/components/ontario-badge/ontario-badge.scss?tag=ontario-badge&encapsulation=shadow","src/components/ontario-badge/ontario-badge.tsx","src/components/ontario-blockquote/ontario-blockquote.scss?tag=ontario-blockquote&encapsulation=shadow","src/components/ontario-blockquote/ontario-blockquote.tsx","src/components/ontario-button/ontario-button.types.ts","src/components/ontario-button/ontario-button.scss?tag=ontario-button&encapsulation=shadow","src/components/ontario-button/ontario-button.tsx","src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx","src/components/ontario-card/ontario-card-types.tsx","src/utils/common/common.interface.ts","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx","src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx","src/utils/common/input/input.tsx","src/utils/common/input-caption/input-caption.types.ts","src/utils/common/input-caption/input-caption.enum.ts","src/utils/common/input-caption/input-caption.tsx","src/utils/components/hints/hints.ts","src/utils/events/event-handler.interface.ts","src/utils/events/event-handler.ts","src/utils/components/error-message/error-message.tsx","src/components/ontario-checkbox/ontario-checkboxes.scss?tag=ontario-checkboxes&encapsulation=shadow","src/components/ontario-checkbox/ontario-checkboxes.tsx","src/components/ontario-critical-alert/ontario-critical-alert.scss?tag=ontario-critical-alert&encapsulation=shadow","src/components/ontario-critical-alert/ontario-critical-alert.tsx","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/native.js","../../node_modules/.pnpm/uuid@11.0.5/node_modules/uuid/dist/esm-browser/v4.js","src/components/ontario-date-input/components/input.tsx","src/components/ontario-date-input/constants/date-input-constants.ts","src/components/ontario-date-input/utils/date-validation-utils.ts","src/components/ontario-date-input/utils/date-options-utils.ts","src/components/ontario-date-input/ontario-date-input.scss?tag=ontario-date-input&encapsulation=shadow","src/components/ontario-date-input/ontario-date-input.tsx","src/utils/helper/assets.ts","src/components/ontario-dropdown-list/ontario-dropdown-list.scss?tag=ontario-dropdown-list&encapsulation=shadow","src/components/ontario-dropdown-list/ontario-dropdown-list.tsx","src/components/ontario-fieldset/ontario-fieldset.scss?tag=ontario-fieldset&encapsulation=shadow","src/components/ontario-fieldset/ontario-fieldset.tsx","src/components/ontario-footer/components/footer-social-links.tsx","src/components/ontario-footer/components/simple-footer.tsx","src/components/ontario-footer/components/footer-column-content.tsx","src/components/ontario-footer/components/footer-column.tsx","src/components/ontario-footer/components/expanded-footer-wrapper.tsx","src/components/ontario-footer/utils/ontario-footer-options-validation.ts","src/components/ontario-footer/ontario-footer.scss?tag=ontario-footer&encapsulation=shadow","src/components/ontario-footer/ontario-footer.tsx","src/components/ontario-header/ontario-header.scss?tag=ontario-header&encapsulation=shadow","src/components/ontario-header/ontario-application-header.scss?tag=ontario-header&encapsulation=shadow","src/components/ontario-header/service-ontario-header.scss?tag=ontario-header&encapsulation=shadow","src/components/ontario-header/ontario-header.tsx","src/components/ontario-hint-expander/ontario-hint-expander.scss?tag=ontario-hint-expander&encapsulation=shadow","src/components/ontario-hint-expander/ontario-hint-expander.tsx","src/components/ontario-hint-text/ontario-hint-text.scss?tag=ontario-hint-text&encapsulation=shadow","src/components/ontario-hint-text/ontario-hint-text.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-accessibility&encapsulation=shadow","src/components/ontario-icon/ontario-icon-accessibility.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-error&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-error.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-information&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-information.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-success&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-success.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-alert-warning&encapsulation=shadow","src/components/ontario-icon/ontario-icon-alert-warning.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-camera&encapsulation=shadow","src/components/ontario-icon/ontario-icon-camera.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-down&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-down.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-left&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-left.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-chevron-up&encapsulation=shadow","src/components/ontario-icon/ontario-icon-chevron-up.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-email&encapsulation=shadow","src/components/ontario-icon/ontario-icon-email.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-help&encapsulation=shadow","src/components/ontario-icon/ontario-icon-help.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-mastercard&encapsulation=shadow","src/components/ontario-icon/ontario-icon-mastercard.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-notification&encapsulation=shadow","src/components/ontario-icon/ontario-icon-notification.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-print&encapsulation=shadow","src/components/ontario-icon/ontario-icon-print.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-sentiment-5&encapsulation=shadow","src/components/ontario-icon/ontario-icon-sentiment-5.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-text-message&encapsulation=shadow","src/components/ontario-icon/ontario-icon-text-message.tsx","src/components/ontario-icon/ontario-icon.scss?tag=ontario-icon-transport-bus&encapsulation=shadow","src/components/ontario-icon/ontario-icon-transport-bus.tsx","src/components/ontario-input/ontario-input.scss?tag=ontario-input&encapsulation=shadow","src/components/ontario-input/ontario-input.tsx","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","src/components/ontario-loading-indicator/ontario-loading-indicator.scss?tag=ontario-loading-indicator&encapsulation=shadow","src/components/ontario-loading-indicator/ontario-loading-indicator.tsx","src/components/ontario-page-alert/ontario-page-alert.scss?tag=ontario-page-alert&encapsulation=shadow","src/components/ontario-page-alert/ontario-page-alert.tsx","src/components/ontario-radio-buttons/ontario-radio-buttons.scss?tag=ontario-radio-buttons&encapsulation=shadow","src/components/ontario-radio-buttons/ontario-radio-buttons.tsx","src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx","src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx","src/utils/common/common.variables.ts","src/components/ontario-table/utils/ontario-table-validation.ts","src/components/ontario-table/ontario-table.scss?tag=ontario-table&encapsulation=shadow","src/components/ontario-table/ontario-table.tsx","src/utils/common/task-statuses.enum.ts","src/components/ontario-task/ontario-task.scss?tag=ontario-task&encapsulation=shadow","src/components/ontario-task/ontario-task.tsx","src/components/ontario-task-list/ontario-task-list.scss?tag=ontario-task-list&encapsulation=shadow","src/components/ontario-task-list/ontario-task-list.tsx","src/components/ontario-textarea/ontario-textarea.scss?tag=ontario-textarea&encapsulation=shadow","src/components/ontario-textarea/ontario-textarea.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/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\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-sizes.variables' as fontSizes;\n\n.ontario-accordions__container {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n}\n\n.ontario-accordion {\n\tborder-top: 2px solid colours.$ontario-greyscale-20;\n\n\t&:last-of-type {\n\t\tborder-bottom: 2px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-accordion__controls {\n\tdisplay: flex;\n\tjustify-content: flex-end;\n}\n\n.ontario-accordion__button,\n.ontario-accordion__button--expand-all {\n\tbackground: none;\n\tborder: 0;\n\tbox-sizing: border-box;\n}\n\n.ontario-accordion__button--expand-all {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tmargin-bottom: spacing.$spacing-2;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t}\n}\n\n.ontario-accordion--expand-close-all {\n\tdisplay: none;\n}\n\n.ontario-accordion__controls--active {\n\t.ontario-accordion--expand-close-all {\n\t\tdisplay: block;\n\t}\n\n\t.ontario-accordion--expand-open-all {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-accordion__button {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tpadding: spacing.$spacing-3 spacing.$spacing-2;\n\ttext-align: left;\n\twidth: globalVariables.$full-width;\n\t@extend %h4-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t.ontario-accordion__button-icon--close,\n\t.ontario-accordion__button-icon--open {\n\t\tmargin-right: spacing.$spacing-2;\n\t}\n\n\t.ontario-icon {\n\t\twidth: 1.75rem;\n\t\theight: 1.75rem;\n\t}\n\n\t&:focus,\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-accordion__content {\n\tdisplay: none;\n\tpadding: spacing.$spacing-3 spacing.$spacing-3 spacing.$spacing-6 spacing.$spacing-3;\n\tmargin-left: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-6;\n\t}\n\n\t* {\n\t\tmargin-top: spacing.$spacing-0;\n\t\tmax-width: globalVariables.$standard-width;\n\t\twidth: globalVariables.$full-width;\n\t}\n\n\tul,\n\tol {\n\t\tmax-width: calc(100% - spacing.$spacing-8);\n\t}\n\n\t& > :last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-accordion__button-icon--close,\n.ontario-expander--active .ontario-accordion__button-icon--open {\n\tdisplay: none;\n}\n\n.ontario-expander--active ~ .ontario-accordion__content,\n.ontario-expander--active .ontario-accordion__button-icon--close {\n\tdisplay: block;\n}\n\n.ontario-accordions__container {\n\t.ontario-h1,\n\t.ontario-h2,\n\t.ontario-h3,\n\t.ontario-h4,\n\t.ontario-h5,\n\tp,\n\th1,\n\th2,\n\th3,\n\th4,\n\th5,\n\th6 {\n\t\tmargin: spacing.$spacing-0;\n\t}\n}\n","import { Component, Prop, Element, State, h, Listen, Watch } from '@stencil/core';\nimport { Accordion } from './accordion.interface';\nimport { ExpandCollapseButtonDetails } from './expandCollapseButtonDetails.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-accordion',\n\tstyleUrl: 'ontario-accordion.scss',\n\tshadow: true,\n})\nexport class OntarioAccordion {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The name of the accordion component.\n\t *\n\t * This is not optional.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * Custom Expand/Collapse button text.\n\t *\n\t * @example\n\t *  <ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\texpand-collapse-button='{\n\t *\t\t\t\"expandAllSectionsLabel\": \"Expand All\",\n\t *\t\t\t\"collapseAllSectionsLabel\": \"Collapse All\"\n\t *\t\t}'\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": [\"Item 1\", \"Item 2\", \"Item 3\"]},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"content\": [\"Item A\", \"Item B\", \"Item C\"]}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() expandCollapseButton?: string | ExpandCollapseButtonDetails;\n\n\t/**\n\t * Used to include individual accordion data for the accordion component.\n\t * This is passed in as an array of objects with key-value pairs.\n\t *\n\t * The `content` is expecting a string, that can either be written as HTML or a just a plain string, depending on the accordionContentType.\n\t *\n\t * @example\n\t * \t<ontario-accordion\n\t *\t\tname=\"My Accordion\"\n\t *\t\taccordion-data='[\n\t *\t\t\t{\"label\": \"Accordion 1\", \"content\": \"This is a string\"},\n\t *\t\t\t{\"label\": \"Accordion 2\", \"accordionContentType\": \"html\", \"content\": \"<ul><li>List A</li><li>List B</li><li>List C</li></ul>\"}\n\t *\t\t]'\n\t *\t></ontario-accordion>\n\t */\n\t@Prop() accordionData: string | Accordion[];\n\n\t/**\n\t * Used to show whether the accordion is opened or closed.\n\t */\n\t@Prop() isOpen: boolean = false;\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 none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\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/**\n\t * Handle the language being toggled from the `<ontario-header>`.\n\t * @param event Event object passed when the event is fired.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Store the translation dictionary for use within the component.\n\t */\n\t@State() translations: any = translations;\n\n\t/**\n\t * The label for the expand/collapse button.\n\t * This is internal and udpdated dynamically.\n\t */\n\t@State() private expandCollapseLabel: 'expand' | 'collapse';\n\n\t/**\n\t * Internal state of the expand/collapse label information.\n\t */\n\t@State() private internalExpandCollapseLabelDetails: ExpandCollapseButtonDetails;\n\n\t/**\n\t * Internal state containing the parsed Accordion Data\n\t */\n\t@State() private internalAccordionData: Accordion[] = [];\n\n\t/**\n\t * This state tracks which accordions are open.\n\t */\n\t@State() private openAccordionIndexes: number[] = [];\n\n\t/**\n\t * Parse Accordion data, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('accordionData')\n\tprivate parseAccordionData() {\n\t\tif (typeof this.accordionData !== 'undefined') {\n\t\t\tthis.internalAccordionData = Array.isArray(this.accordionData)\n\t\t\t\t? this.accordionData\n\t\t\t\t: JSON.parse(this.accordionData);\n\t\t}\n\n\t\t// Initialize the label based on the initial accordion state\n\t\tthis.updateLabel();\n\t}\n\n\t/**\n\t * Parse Expand/Collapse Button Details, this is used to handle JSON strings from HTML.\n\t */\n\t@Watch('expandCollapseButton')\n\tprivate parseExpandCollapseButtonDetails() {\n\t\tif (typeof this.expandCollapseButton !== 'undefined') {\n\t\t\tthis.internalExpandCollapseLabelDetails =\n\t\t\t\ttypeof this.expandCollapseButton === 'string'\n\t\t\t\t\t? JSON.parse(this.expandCollapseButton)\n\t\t\t\t\t: this.expandCollapseButton;\n\t\t}\n\t}\n\n\t// Toggle the accordion state when it's clicked\n\tprivate toggleAccordion(index: number) {\n\t\tif (this.openAccordionIndexes.includes(index)) {\n\t\t\t// If the accordion is already open, close it\n\t\t\tthis.openAccordionIndexes = this.openAccordionIndexes.filter((i) => i !== index);\n\t\t} else {\n\t\t\t// If the accordion is closed, open it\n\t\t\tthis.openAccordionIndexes = [...this.openAccordionIndexes, index];\n\t\t}\n\t\tthis.updateLabel();\n\t}\n\n\t/**\n\t * Toggle all accordions open/close\n\t */\n\tprivate toggleAll() {\n\t\tif (this.openAccordionIndexes.length === this.internalAccordionData.length) {\n\t\t\t// All accordions are open, close all\n\t\t\tthis.openAccordionIndexes = [];\n\t\t} else {\n\t\t\t// At least one accordion is closed, open all\n\t\t\tthis.openAccordionIndexes = this.internalAccordionData.map((_, index) => index);\n\t\t}\n\t\tthis.updateLabel();\n\t}\n\n\t/**\n\t * Update the label based on the current accordion state\n\t */\n\tprivate updateLabel() {\n\t\tconst allOpen = this.internalAccordionData.every((_, index) => this.openAccordionIndexes.includes(index));\n\n\t\tif (allOpen) {\n\t\t\t// All accordions are open, set label to \"Collapse all\"\n\t\t\tthis.expandCollapseLabel = 'collapse';\n\t\t} else {\n\t\t\t// At least one accordion is closed, set label to \"Expand all\"\n\t\t\tthis.expandCollapseLabel = 'expand';\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseAccordionData();\n\t\tthis.parseExpandCollapseButtonDetails();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<h2>{this.name}</h2>\n\t\t\t\t<div class=\"ontario-accordions__container\">\n\t\t\t\t\t<div class=\"ontario-accordion__controls\">\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclass=\"ontario-accordion__button--expand-all\"\n\t\t\t\t\t\t\tonClick={() => this.toggleAll()}\n\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.length === this.internalAccordionData.length ? 'true' : 'false'}\n\t\t\t\t\t\t\taria-label={this.internalExpandCollapseLabelDetails?.ariaLabelText}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<span class=\"ontario-accordion--expand-open-all\">\n\t\t\t\t\t\t\t\t{this.expandCollapseLabel === 'expand' ? (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.expandAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.expand[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t{this.internalExpandCollapseLabelDetails?.collapseAllSectionsLabel ??\n\t\t\t\t\t\t\t\t\t\t\tthis.translations.accordion.collapse[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</button>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.internalAccordionData?.map((accordion, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass={`ontario-accordion ${this.openAccordionIndexes.includes(index) ? 'open' : ''}`}\n\t\t\t\t\t\t\tkey={`accordion-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<h3\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__heading ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index) ? 'ontario-expander--active' : ''\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\tclass=\"ontario-accordion__button\"\n\t\t\t\t\t\t\t\t\taria-expanded={this.openAccordionIndexes.includes(index) ? 'true' : 'false'}\n\t\t\t\t\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t\t\t\t\t\tonClick={() => this.toggleAccordion(index)}\n\t\t\t\t\t\t\t\t\taria-label={accordion.ariaLabelText}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--close\">\n\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"blue\"></ontario-icon-chevron-up>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span class=\"ontario-accordion__button-icon--open\">\n\t\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"blue\"></ontario-icon-chevron-down>\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{accordion.label}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\tclass={`ontario-accordion__content ${\n\t\t\t\t\t\t\t\t\tthis.openAccordionIndexes.includes(index)\n\t\t\t\t\t\t\t\t\t\t? 'ontario-accordion__content--opened'\n\t\t\t\t\t\t\t\t\t\t: 'ontario-accordion__content--closed'\n\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\taria-hidden={!this.openAccordionIndexes.includes(index)}\n\t\t\t\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{accordion.accordionContentType === 'html' ? (\n\t\t\t\t\t\t\t\t\t<div innerHTML={accordion.content}></div> // Render HTML content\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<div>{accordion.content}</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","import { Base } from '../../common/common.interface';\n\nexport const HeadingLevel = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\nexport type HeadingLevelOptions = (typeof HeadingLevel)[number];\n\nexport const HighlightColours = ['teal', 'gold', 'yellow', 'taupe', 'green', 'lime', 'sky', 'blue', 'purple'] as const;\n\nexport type HighlightColourOptions = (typeof HighlightColours)[number];\n\nexport type CalloutAsideType = 'callout' | 'aside';\n\nexport type HeadingContentType = 'string' | 'html';\n\nexport const HeadingContentTypes = ['string', 'html'] as const;\n\nexport interface CalloutAside extends Base {\n\t/**\n\t * The heading level of the callout/aside heading.\n\t */\n\theadingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\theadingContentType: HeadingContentType;\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout/aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\theadingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout/aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout/aside component if additional/different elements for the content are needed.\n\t */\n\tcontent?: string | HTMLElement;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout/aside. If none is passed, the default colour will be teal.\n\t */\n\thighlightColor?: HighlightColourOptions | undefined;\n}\n","import { h } from '@stencil/core';\nimport {\n\tCalloutAsideType,\n\tHeadingLevel,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHighlightColours,\n\tHighlightColourOptions,\n} from './callout-aside.interface';\n\nexport const isValidHighlightColour = (colour: HighlightColourOptions): colour is HighlightColourOptions =>\n\tHighlightColours.includes(colour);\n\nexport const isValidHeadingLevel = (level: HeadingLevelOptions): level is HeadingLevelOptions =>\n\tHeadingLevel.includes(level);\n\nconst generateClasses = (type: CalloutAsideType, highlightColor?: HighlightColourOptions) => {\n\tconst componentType = type === 'callout' ? `ontario-callout` : `ontario-aside`;\n\tconst borderColor = `ontario-border-highlight--${highlightColor}`;\n\n\treturn highlightColor ? `${componentType} ${borderColor}` : `${componentType}`;\n};\n\nconst generateHeading = (\n\ttype: CalloutAsideType,\n\theadingType: HeadingLevelOptions | undefined,\n\theadingContentType: HeadingContentType,\n\theadingContent: string,\n) => {\n\tconst headingContentIsHTML = headingContentType === 'html';\n\n\tswitch (headingType) {\n\t\tcase 'h2':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t\tcase 'h3':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h3>\n\t\t\t) : (\n\t\t\t\t<h3 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h3>\n\t\t\t);\n\t\tcase 'h4':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h4>\n\t\t\t) : (\n\t\t\t\t<h4 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h4>\n\t\t\t);\n\t\tcase 'h5':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h5>\n\t\t\t) : (\n\t\t\t\t<h5 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h5>\n\t\t\t);\n\t\tcase 'h6':\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h6>\n\t\t\t) : (\n\t\t\t\t<h6 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h6>\n\t\t\t);\n\t\tdefault:\n\t\t\treturn headingContentIsHTML ? (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`} innerHTML={headingContent}></h2>\n\t\t\t) : (\n\t\t\t\t<h2 class={`ontario-${type}__title ontario-h5`}>{headingContent}</h2>\n\t\t\t);\n\t}\n};\n\nexport const generateCalloutAside = (\n\ttype: CalloutAsideType,\n\theadingContentType: HeadingContentType,\n\theadingType?: HeadingLevelOptions,\n\theadingContent?: string,\n\tcontent?: string | HTMLElement,\n\thighlightColour?: HighlightColourOptions,\n) => {\n\tconst contentIsString = typeof content === 'string';\n\n\treturn type === 'callout' ? (\n\t\t<div class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? <p>{content}</p> : <slot />}\n\t\t</div>\n\t) : (\n\t\t<aside class={generateClasses(type, highlightColour)}>\n\t\t\t{headingContent ? generateHeading(type, headingType, headingContentType, headingContent) : ''}\n\t\t\t{contentIsString ? content ? <p>{content}</p> : '' : <slot />}\n\t\t</aside>\n\t);\n};\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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-aside {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-6;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t.ontario-aside {\n\t\t\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-4;\n\t\t}\n\t}\n}\n\n.ontario-aside__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$aside-highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $aside-highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-aside',\n\tstyleUrl: 'ontario-aside.scss',\n\tshadow: true,\n})\nexport class OntarioAside implements CalloutAside {\n\t/**\n\t * The heading level of the aside heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to string.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the aside. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the aside component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the aside component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-aside headingType='h3' headingContent='This is the aside heading'><p>This is the first sentence of the aside content.</p><p>This is the second sentence of the aside content.</p></ontario-aside>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the aside. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t *\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` prop for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-aside> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'aside',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\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/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/breakpoints.variables' as breakpoints;\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/functions/global.functions' as globalFunctions;\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/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-icon-margin-top: 0.125rem;\n\n// Colour variables\n$ontario-colour-back-to-top-background: #e6e6e6;\n$ontario-colour-back-to-top--active-background: #b2b2b2;\n\n.ontario-back-to-top,\n// Fractal component style coverage ↓\n.ontario-back-to-top--default {\n\tposition: fixed;\n\tbottom: 5%;\n\tright: 2%;\n\tvisibility: hidden;\n\topacity: 0;\n\ttransition: 0.1s ease-in-out;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: globalFunctions.px-to-rem(48);\n\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-3;\n\tbackground: $ontario-colour-back-to-top-background;\n\tborder: globalFunctions.px-to-rem(2) solid colours.$ontario-colour-white;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-shadow: 0 globalFunctions.px-to-rem(2) globalFunctions.px-to-rem(4) rgba(colours.$ontario-colour-black, 0.6);\n\tbox-sizing: border-box;\n\tcolor: colours.$ontario-colour-black;\n\tline-height: globalFunctions.px-to-rem(20);\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tz-index: 10000;\n\tcursor: pointer;\n\n\t.ontario-icon {\n\t\tmargin: $ontario-icon-margin-top spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0;\n\t\twidth: globalFunctions.px-to-rem(32);\n\t\theight: globalFunctions.px-to-rem(32);\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-colour-back-to-top-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(3) globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition: 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-colour-back-to-top--active-background;\n\t\tbox-shadow:\n\t\t\t0 0 0 globalFunctions.px-to-rem(4) colours.$ontario-colour-focus,\n\t\t\t0 globalFunctions.px-to-rem(5) globalFunctions.px-to-rem(7) globalFunctions.px-to-rem(3) rgba(0, 0, 0, 0.6);\n\t\toutline: globalFunctions.px-to-rem(4) solid transparent;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tflex-direction: column;\n\t\theight: globalFunctions.px-to-rem(76);\n\t\tpadding: globalFunctions.px-to-rem(6) spacing.$spacing-3 globalFunctions.px-to-rem(9) spacing.$spacing-3;\n\n\t\t.ontario-icon {\n\t\t\tmargin: globalFunctions.px-to-rem(1) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t\t\twidth: globalFunctions.px-to-rem(32);\n\t\t\theight: globalFunctions.px-to-rem(32);\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tdisplay: block;\n\t\tpadding: spacing.$spacing-1;\n\t\tfont-size: 0;\n\t\twidth: globalFunctions.px-to-rem(48);\n\t\theight: globalFunctions.px-to-rem(48);\n\n\t\t.ontario-icon {\n\t\t\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0;\n\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\tmargin-top: $ontario-icon-margin-top;\n\t\t\t}\n\t\t}\n\t}\n\n\t&.active {\n\t\tvisibility: visible;\n\t\topacity: 1;\n\t}\n}\n","import { Component, h, Element, Prop, Listen, State } from '@stencil/core';\n\nimport OntarioIconArrowUp from '../ontario-icon/assets/ontario-icon-arrow-up.svg';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-back-to-top',\n\tstyleUrl: 'ontario-back-to-top.scss',\n\tshadow: true,\n})\nexport class OntarioBackToTop {\n\t@Element() element: HTMLElement;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language prop is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t@State() translations: any = translations;\n\n\t@State() private displayBackToTop: boolean = false;\n\n\t@State() private scrollYValue: number = 200;\n\n\t/**\n\t * This listens for the window Y scroll value to be above 200 pixels. Once it is, the Back to Top button will toggle the `displayBackToTop` state which will set an active class to control the components' visibility.\n\t */\n\t@Listen('scroll', { target: 'window' })\n\tshowBackToTopButton() {\n\t\tthis.displayBackToTop = window.scrollY > this.scrollYValue;\n\t}\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Scroll to top functionality when the Back to Top button is clicked\n\t */\n\tprivate scrollToTop() {\n\t\twindow.scrollTo({ top: 0, left: 0, behavior: 'smooth' });\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={this.displayBackToTop ? `ontario-back-to-top active` : `ontario-back-to-top`}\n\t\t\t\tonClick={this.scrollToTop}\n\t\t\t\taria-label={this.translations.backToTop.ariaLabel[`${this.language}`]}\n\t\t\t>\n\t\t\t\t<span aria-hidden=\"true\" innerHTML={OntarioIconArrowUp}></span>\n\t\t\t\t{this.translations.backToTop.top[`${this.language}`]}\n\t\t\t</button>\n\t\t);\n\t}\n}\n","import { Conjunction } from './utils-types';\n\nexport function format(first: string | undefined, middle: string | undefined, last: string | undefined): string {\n\treturn (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function hasMultipleTrueValues<T>(arr: T[], key: keyof T): boolean {\n\tlet count = 0;\n\n\tfor (const obj of arr) {\n\t\tif (obj[key] === true || obj[key] === 'true') {\n\t\t\tcount++;\n\t\t\tif (count > 1) {\n\t\t\t\treturn true;\n\t\t\t}\n\t\t}\n\t}\n\n\treturn false;\n}\n\nexport function extractValuesByKey<T>(objects: T[], key: keyof T): Array<T[keyof T]> {\n\treturn objects.map((obj) => obj[key]);\n}\n\nexport function organizeObjectKeys(data: any[], columns: string[]): any[] {\n\treturn data.map((item) => {\n\t\tconst newData: any = {};\n\t\tconst otherKeys: any = {};\n\n\t\t// Iterate through each key in the item\n\t\tObject.keys(item).forEach((key) => {\n\t\t\tif (key === 'data') {\n\t\t\t\t// Organize keys in the 'data' object\n\t\t\t\tcolumns.forEach((column) => {\n\t\t\t\t\tif (column in item.data) {\n\t\t\t\t\t\tnewData[column] = item.data[column];\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\t// Preserve other keys\n\t\t\t\totherKeys[key] = item[key];\n\t\t\t}\n\t\t});\n\n\t\treturn { data: newData, ...otherKeys };\n\t});\n}\n\nexport function removeObjectsBySpecificKey<T>(objects: T[], key: keyof T, value: boolean | 'true'): [T[], T[]] {\n\tconst removedObjects: T[] = [];\n\tconst filteredObjects = objects.filter((obj) => {\n\t\tif (obj[key] === value) {\n\t\t\tremovedObjects.push(obj);\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t});\n\treturn [filteredObjects, removedObjects];\n}\n\n/**\n * Takes an input value and determines whether or not it is a number.\n *\n * @param {string | number} value - The value you would like to test against.\n *\n * @returns {boolean}\n */\nexport function isNumber(value: string | number): boolean {\n\tif (value === undefined || value === null) return false;\n\treturn isNaN(Number(value)) === false;\n}\n\nexport function isEmpty(str: string | undefined | null): boolean {\n\treturn !str || str?.length <= 0;\n}\n\n/**\n * Retrieves the keys from an enum and lists them in an array.\n *\n * @param {object} enumObject - The enum you wish to get the keys of.\n *\n * @returns {string[]}\n */\nexport function retrieveEnumKeys(enumObject: object): string[] {\n\tif (enumObject === undefined || enumObject === null) return new Array<string>(0);\n\treturn Object.keys(enumObject).filter((key) => !isNumber(key));\n}\n\n/**\n * Prints an array as a comma delimited list, with the last element being preceded by a conjunction.\n * As per ontario.ca content guidelines, there is no Oxford comma.\n *\n * @param {Array<any>} arr - The array that you wish to print.\n * @param {Conjunction} conjunctionType - Whether you want the sentence to end with 'and value.' or 'or value.'\n *\n * @returns {string}\n */\nexport function printArray(arr: Array<any>, conjunctionType: Conjunction = 'and'): string {\n\treturn [...arr].reduce(\n\t\t(text, value, i, array) => text + (i < array.length - 1 ? ', ' : ` ${conjunctionType} `) + value,\n\t);\n}\n\n/**\n * Grabs the HTML element of the page.\n *\n * More targetted than document.documentElement as the documentElement could\n * in theory be any element that is the top level. e.g. <div> if the page is not\n * set up to be semantically correct.\n *\n * @returns {HTMLElement}\n */\nexport function getRootHTMLElement(): HTMLElement {\n\treturn document.getElementsByTagName('html')[0];\n}\n","import { retrieveEnumKeys } from '../../utils/helper/utils';\n\nexport enum BadgeColourToClass {\n\tteal = 'ontario-badge--default-heavy',\n\tlightTeal = 'ontario-badge--default-light',\n\tblack = 'ontario-badge--neutral-heavy',\n\tgrey = 'ontario-badge--neutral-light',\n\tred = 'ontario-badge--alert-heavy',\n\tyellow = 'ontario-badge--warning-heavy',\n\tgreen = 'ontario-badge--success-heavy',\n\twhite = 'ontario-badge--white',\n\tdarkGrey = 'ontario-badge--grey',\n}\n\nexport const BadgeColours = retrieveEnumKeys(BadgeColourToClass);\n\nexport type BadgeColour = keyof typeof BadgeColourToClass;\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/spacing.variables' as spacing;\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/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n.ontario-badge__container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: spacing.$spacing-7;\n\talign-items: flex-start;\n\tpadding: spacing.$spacing-5 spacing.$spacing-4;\n}\n\n.ontario-badge__label {\n\tdisplay: block;\n\ttext-align: left;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tmargin-bottom: spacing.$spacing-3;\n\tfont-size: fontSizes.$ontario-font-size-small;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge {\n\tdisplay: inline-block;\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n\tpadding: spacing.$spacing-1 spacing.$spacing-2;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(25);\n\tletter-spacing: 0.03rem;\n\ttext-transform: uppercase;\n}\n\n.ontario-badge--default-light {\n\tbackground-color: colours.$ontario-colour-information-light;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--default-heavy {\n\tbackground-color: colours.$ontario-colour-information;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--neutral-light {\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--neutral-heavy {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--alert-heavy {\n\tbackground-color: colours.$ontario-colour-alert;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--warning-heavy {\n\tbackground-color: colours.$ontario-colour-warning;\n\tcolor: colours.$ontario-colour-black;\n}\n\n.ontario-badge--success-heavy {\n\tbackground-color: colours.$ontario-colour-success;\n\tcolor: colours.$ontario-colour-white;\n}\n\n.ontario-badge--white {\n\tbackground-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-greyscale-70;\n\tborder: globalFunctions.px-to-rem(1) solid colours.$ontario-greyscale-70;\n}\n\n.ontario-badge--grey {\n\tbackground-color: colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, Prop, Element, h, Watch, AttachInternals } from '@stencil/core';\n\nimport { BadgeColour, BadgeColours, BadgeColourToClass } from './ontario-badge.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-badge',\n\tstyleUrl: 'ontario-badge.scss',\n\tshadow: true,\n})\nexport class OntarioBadge {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The colour of the badge.\n\t */\n\t@Prop({ mutable: true }) colour: BadgeColour = 'teal';\n\n\t/**\n\t * The label for the badge.\n\t *\n\t * Offical guidance is to keep the label length within 15 characters.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * An aria label for screen readers.\n\t *\n\t * Used to provide more context to screen readers if necessary.\n\t *\n\t * This property is optional.\n\t *\n\t * @example\n\t * <ontario-badge aria-label-text=\"This training is currently in progress.\">In progress</ontario-badge>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * Watch for changes in the `label` prop for validation purposes.\n\t *\n\t * If no `label` value or host.textContent is provided, a warning message will be printed.\n\t */\n\t@Watch('label')\n\tvalidateLabel() {\n\t\tif (!this.getBadgeLabel()) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' a label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-badge> ')\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 `colour` prop.\n\t *\n\t * If no `colour` is passed, or if the `colour` does not match the `colour` options, a default value of 'teal' will be applied.\n\t *\n\t * @returns {BadgeColour}\n\t */\n\t@Watch('colour')\n\tvalidateColour(): BadgeColour {\n\t\tif (this.colour) {\n\t\t\tif (validateValueAgainstArray(this.colour, BadgeColours)) {\n\t\t\t\treturn this.colour;\n\t\t\t} else {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` colour ${this.colour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-badge> ')\n\t\t\t\t\t.addRegularText('does not match one of the valid colour types. A default colour of `teal` will be applied.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\treturn this.setBadgeColour('teal');\n\t}\n\n\t/**\n\t * Programatically set and return the colour prop.\n\t *\n\t * @prop {BadgeColour} colour\n\t *\n\t * @returns {BadgeColour}\n\t */\n\tsetBadgeColour(colour: BadgeColour): BadgeColour {\n\t\tthis.colour = colour;\n\t\treturn this.colour;\n\t}\n\n\t/**\n\t * Returns badge label depending on if the label prop was set or\n\t * if the host.textContent (text in-between the opening and closing tag) was set.\n\t *\n\t * The label prop takes priority.\n\t *\n\t * @returns {string | null}\n\t */\n\tgetBadgeLabel(): string | null {\n\t\tconst badgeLabel = this.label ? this.label : this.host.textContent;\n\t\treturn badgeLabel;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateLabel();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<span class={`ontario-badge ${BadgeColourToClass[this.colour]}`} aria-label={this.ariaLabelText}>\n\t\t\t\t{this.getBadgeLabel()}\n\t\t\t</span>\n\t\t);\n\t}\n}\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/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/breakpoints.variables' as breakpoints;\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/line-heights.variables' as lineHeights;\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\n.ontario-blockquote {\n\tborder-left: 4px solid colours.$ontario-greyscale-70;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: globalFunctions.px-to-rem(19);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\tmax-width: globalVariables.$standard-width;\n\tmargin: spacing.$spacing-6;\n\tpadding: spacing.$spacing-5 0 spacing.$spacing-5 spacing.$spacing-5;\n\tquotes: '\\201C' '\\201D';\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-5 spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\t}\n}\n\n.ontario-blockquote p {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5 spacing.$spacing-0;\n\n\t&::before {\n\t\tcontent: open-quote;\n\t}\n\n\t&::after {\n\t\tcontent: close-quote;\n\t}\n}\n\n.ontario-blockquote--short {\n\tfont-size: globalFunctions.px-to-rem(28);\n\tletter-spacing: 0.02rem;\n\tline-height: lineHeights.$ontario-line-height-7;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: globalFunctions.px-to-rem(23);\n\t\tline-height: lineHeights.$ontario-line-height-6;\n\t}\n}\n\n.ontario-blockquote__attribution,\n.ontario-blockquote__byline {\n\tdisplay: block;\n\tfont-size: globalFunctions.px-to-rem(16);\n\tletter-spacing: 0.025rem;\n\tline-height: lineHeights.$ontario-line-height-8;\n\ttext-align: right;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tletter-spacing: 0.03rem;\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t}\n}\n\n.ontario-blockquote__attribution {\n\tfont-style: normal;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&::before {\n\t\tcontent: '\\2014 \\0020';\n\t}\n}\n\nhtml[lang='fr'] blockquote {\n\tquotes: '« ' ' »';\n}\n","import { Component, h, Element, Prop, State, Watch } from '@stencil/core';\n\nimport { Blockquote } from './blockquote.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-blockquote',\n\tstyleUrl: 'ontario-blockquote.scss',\n\tshadow: true,\n})\nexport class OntarioBlockquote implements Blockquote {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed as the quote.\n\t *\n\t * Note that wrapping the quotes in quotations is not needed - this is handled through the component styles\n\t */\n\t@Prop({ mutable: true }) quote: string;\n\n\t/**\n\t * Optional text to be displayed as the attribution (the author) of the quote.\n\t */\n\t@Prop() attribution?: string;\n\n\t/**\n\t * Optional text to be displayed for additional information about the attribution/author.\n\t */\n\t@Prop() byline?: string;\n\n\t@State() shortQuoteLength: number = 140;\n\n\t@State() shortQuote: boolean = false;\n\n\t@State() private quoteState: string;\n\n\t/*\n\t * Watch for changes in the `quote` prop for validation purposes.\n\t *\n\t * If the `quote` prop is not provided, set the `quote` prop to the host textContent (if it exists).\n\t * If the `quote` prop length is 140 characters or less, set the `shortQuote` state to true - this will add additonal classes for the blockquote styles.\n\t */\n\t@Watch('quote')\n\tvalidateQuote() {\n\t\tthis.quoteState = this.quote ?? this.host.textContent ?? '';\n\t\tthis.validateQuoteContent(this.quoteState);\n\t\tthis.shortQuote = this.quoteState?.length <= this.shortQuoteLength ?? true;\n\t}\n\n\t/**\n\t * Print the missing `quote` prop warning message\n\t */\n\tvalidateQuoteContent(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(' quote ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-blockquote> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateQuote();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.validateQuote();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<blockquote class={this.shortQuote ? `ontario-blockquote ontario-blockquote--short` : `ontario-blockquote`}>\n\t\t\t\t<p>{this.quoteState}</p>\n\t\t\t\t{this.attribution && <cite class=\"ontario-blockquote__attribution\">{this.attribution}</cite>}\n\t\t\t\t{this.byline && <cite class=\"ontario-blockquote__byline\">{this.byline}</cite>}\n\t\t\t</blockquote>\n\t\t);\n\t}\n}\n","export const ButtonTypes = ['primary', 'secondary', 'tertiary', 'internalThemeDark'] as const;\nexport const HtmlTypes = ['button', 'reset', 'submit'] as const;\n\nexport type ButtonType = (typeof ButtonTypes)[number];\nexport type HtmlType = (typeof HtmlTypes)[number];\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n\n$ontario-button-bg-primary: colours.$ontario-colour-link;\n$ontario-button-bg-primary--hover: colours.$ontario-colour-link--hover;\n$ontario-button-bg-primary--active: colours.$ontario-colour-link--active;\n$ontario-button-bg-secondary: colours.$ontario-colour-white;\n\n.ontario-button {\n\tborder: none;\n\tborder-radius: globalVariables.$global-radius;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: spacing.$spacing-0 (spacing.$spacing-4 + spacing.$spacing-3) spacing.$spacing-5 spacing.$spacing-0;\n\tmin-width: 10rem;\n\tpadding: math.div((spacing.$spacing-4 + spacing.$spacing-1), 2) spacing.$spacing-5;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-right: 0;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t}\n\n\t.ontario-icon {\n\t\tmargin-right: 4px;\n\t}\n}\n\n.ontario-button--primary {\n\tbackground-color: $ontario-button-bg-primary;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: $ontario-button-bg-primary--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: $ontario-button-bg-primary--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-button--secondary {\n\tbackground-color: $ontario-button-bg-secondary;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-link;\n\tpadding-top: spacing.$spacing-2;\n\tpadding-bottom: spacing.$spacing-2;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--hover;\n\t\tborder-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-secondary--active;\n\t\tborder-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--tertiary {\n\tbackground-color: transparent;\n\tcolor: colours.$ontario-colour-link;\n\ttext-decoration: underline;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: $ontario-button-bg-primary--hover;\n\t\ttext-decoration: underline;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--hover;\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-button-tertiary--active;\n\t\tcolor: colours.$ontario-colour-link--active;\n\t\ttext-decoration: underline;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n\n.ontario-button--internalThemeDark {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0.2s ease-out,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t\ttransition:\n\t\t\tbackground-color 0s,\n\t\t\tfocusPlaceholders.$ontario-focus-transition;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-link;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, AttachInternals } from '@stencil/core';\n\nimport { Button } from './button.interface';\nimport { ButtonType, ButtonTypes, HtmlType, HtmlTypes } from './ontario-button.types';\n\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-button',\n\tstyleUrl: 'ontario-button.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioButton implements Button {\n\t@Element() host: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * The type of button to render.\n\t *\n\t * If no type is passed, it will default to 'secondary'.\n\t */\n\t@Prop() type: ButtonType = 'secondary';\n\n\t/**\n\t * The native HTML button type the button should use.\n\t *\n\t * If no htmlType is passed, it will default to 'button'.\n\t */\n\t@Prop() htmlType: HtmlType = 'button';\n\n\t/**\n\t * Text to be displayed within the button. This will override the text provided through the host element textContent.\n\t *\n\t * @example\n\t * <ontario-button label=\"Label Text\">Text</ontario-button>\n\t *\n\t * The resulting button will have the label `\"Label Text\"`.\n\t */\n\t@Prop() label?: string;\n\n\t/**\n\t * Provides more context as to what the button interaction is doing. This should only be used for accessibility purposes, if the button interaction requires more description than what the text provides.\n\t *\n\t *  This is optional.\n\t *\n\t * @example\n\t * <ontario-button aria-label-text=\"Click button to open map\">Open</ontario button>\n\t */\n\t@Prop({ mutable: true }) ariaLabelText?: string;\n\n\t/**\n\t * The unique identifier of the button. 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 * Mutable variable, for internal use only.\n\t * Set the button's type depending on validation result.\n\t */\n\t@State() private typeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the native HTML button type depending on validation result.\n\t */\n\t@State() private htmlTypeState: string;\n\n\t@State() private labelState: string;\n\n\t/**\n\t * A reference to the internal button element.\n\t */\n\n\tprivate buttonRef: HTMLButtonElement;\n\n\t/*\n\t * Watch for changes to the `label` property for validation purposes.\n\t *\n\t * If  no `label` prop is provided, the `label` prop will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('label')\n\tprivate updateLabelContent() {\n\t\tthis.labelState = this.label ?? this.host.textContent ?? '';\n\t\tthis.validateLabelContent(this.labelState);\n\t}\n\n\t/**\n\t * Watch for changes to the `type` property 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 (`secondary`).\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, ButtonTypes);\n\t\tthis.typeState = isValid ? this.type : this.warnDefaultType();\n\t}\n\n\t/**\n\t *  Watch for changes to the `htmlType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `htmlType` will be set to its default (`submit`).\n\t * If a match is found in one of the array values then `htmlType` will be set to the matching array key value.\n\t */\n\t@Watch('htmlType')\n\tvalidateHtmlType() {\n\t\tconst isValid = validateValueAgainstArray(this.htmlType, HtmlTypes);\n\t\tthis.htmlTypeState = isValid ? this.htmlType : this.warnDefaultHtmlType();\n\t}\n\n\t/**\n\t * Print the missing `label` prop warning message\n\t */\n\tvalidateLabelContent(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(' label ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-button> ')\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 * Print the invalid `type` prop warning message\n\t * @returns default type (secondary)\n\t */\n\tprivate warnDefaultType(): ButtonType {\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-button> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' primary, secondary, or tertiary ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' secondary ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'secondary';\n\t}\n\n\t/**\n\t * Print the invalid `htmlType` warning message\n\t * @returns default htmlType (button)\n\t */\n\tprivate warnDefaultHtmlType(): HtmlType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' htmlType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-button> ')\n\t\t\t.addRegularText('was set to an invalid htmlType; only')\n\t\t\t.addMonospaceText(' button, reset, or submit ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' button ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'button';\n\t}\n\n\t/**\n\t * @returns the classes of the button based of the button's `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-button ontario-button--${this.typeState}`;\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * Set `buttonId`, `label`, and `ariaLabel` using internal component logic.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateLabelContent();\n\t\tthis.validateHtmlType();\n\t\tthis.validateType();\n\t\tthis.ariaLabelText = this.ariaLabelText ?? this.labelState;\n\t}\n\n\tcomponentDidLoad() {\n\t\t// Used to help load translations for any slots + text content passed in by the user.\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateLabelContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\n\t\t// Add a click event listener to handle submitting a form\n\t\tif (this.htmlTypeState === 'submit') {\n\t\t\tthis.buttonRef.addEventListener('click', () => {\n\t\t\t\tconst { form } = this.internals;\n\t\t\t\tform?.requestSubmit();\n\t\t\t});\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={(el) => (this.buttonRef = el as HTMLButtonElement)}\n\t\t\t\ttype={this.htmlTypeState}\n\t\t\t\tclass={this.getClass()}\n\t\t\t\taria-label={this.ariaLabelText}\n\t\t\t\tid={this.getId()}\n\t\t\t>\n\t\t\t\t{this.labelState}\n\t\t\t</button>\n\t\t);\n\t}\n}\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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/**\n\t * The heading level of the callout heading.\n\t */\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/**\n\t * The type of the heading content. If no prop is passed, it will default to `string`.\n\t */\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/**\n\t * Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t */\n\t@Prop() headingContent?: string;\n\n\t/**\n\t * Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t *\n\t * HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t *\n\t * @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t */\n\t@Prop() content?: string;\n\n\t/**\n\t * Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t */\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/**\n\t * Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t */\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in the `headingContentType` variable for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t */\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `highlightColour` prop.\n\t *\n\t * If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t */\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/**\n\t * Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n","import { HeadingLevel } from '../../utils/common/common.interface';\n\nexport const layoutDirectionDefinitions = ['vertical', 'horizontal'] as const;\nexport const horizontalImagePositionDefinitions = ['left', 'right'] as const;\nexport const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'] as const;\n\nexport type LayoutDirection = (typeof layoutDirectionDefinitions)[number];\nexport type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];\nexport type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];\n\nexport const headerColourDefinitions = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n] as const;\n\nexport type HeaderColour = (typeof headerColourDefinitions)[number];\n\n// Define properties that you would like to track as component state\nexport type CardState = {\n\theaderColour: HeaderColour | undefined;\n\theadingLevel: HeadingLevel | undefined;\n\tlayoutDirection: LayoutDirection | undefined;\n};\n","import { Language } from './language-types';\nimport { InputInteractionEvent, InputFocusBlurEvent } from '../events/event-handler.interface';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface Base {\n\t/**\n\t * The unique identifier of the element. This is optional - if no ID is passed, one will be generated.\n\t */\n\telementId?: string;\n\n\t/**\n\t * Returns the unique identifier.\n\t */\n\tgetId?: () => string;\n\n\t/**\n\t * Stencil API that doesn't return anything. Implementation is optional.\n\t */\n\tcomponentWillLoad?: () => void;\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender?: () => object;\n}\n\nexport interface Input extends Base {\n\t/**\n\t * The name assigned to the element. The name value is used to reference form data after a form is submitted.\n\t */\n\tname: string;\n\n\t/**\n\t * Used to define whether the input field is required or not.\n\t */\n\trequired?: boolean;\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\tlanguage?: Language;\n\n\t/**\n\t * The element content value.\n\t */\n\tvalue?: string;\n\n\t/**\n\t * Used to add a custom function to the input onChange event.\n\t */\n\tcustomOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onBlur event.\n\t */\n\tcustomOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the input onFocus event.\n\t */\n\tcustomOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t */\n\tinputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has lost focus.\n\t */\n\tinputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when an input has gained focus.\n\t */\n\tinputOnFocus: EventEmitter<InputFocusBlurEvent>;\n}\n\nexport interface Hint extends Base {\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\thintContentType?: 'string' | 'html';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the element content or setting the\n\t * this property.  This property will take precedence.\n\t */\n\thint: string;\n}\n\nexport type HintContentType = 'string' | 'html';\n\nexport const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\n/**\n * Create a type from an array of values.\n *\n * https://steveholgado.com/typescript-types-from-arrays/\n */\nexport type HeadingLevel = (typeof headingLevelDefinitions)[number];\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\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/font-sizes.variables' as fontSizes;\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/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin-bottom: spacing.$spacing-7;\n\tpadding: spacing.$spacing-0;\n\t/*\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t */\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\tbackground: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: math.percentage(math.div(2, 3));\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\theaderColourDefinitions,\n\tHeaderColour,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tlayoutDirectionDefinitions,\n\tLayoutDirection,\n\tCardState,\n} from './ontario-card-types';\nimport { headingLevelDefinitions, HeadingLevel } from '../../utils/common/common.interface';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Text to be displayed within the header.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theader-type=\"dark\"\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * The heading level that the label will be rendered as.\n\t *\n\t * @example\n\t *\t<ontario-card\n\t *\t\theading-level=\"h4\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t>\n\t */\n\t@Prop() headingLevel: HeadingLevel = 'h2';\n\n\t/**\n\t * Image to be displayed within the card image container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() image?: string;\n\n\t/**\n\t * Alt text for the card's image.\n\t *\n\t * This is optional prop, but may be required for an\n\t * image due to accessibility requirements.\n\t *\n\t * You can find guidance on when to add alt text to an image\n\t * on the Ontario.ca web content editing guide.\n\t *\n\t * https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility\n\t *\n\t * Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup\n\t * for decorative images. If left as undefined, the alt attribute will not render in markup.\n\t */\n\t@Prop() imageAltText?: string = '';\n\n\t/**\n\t * Text to be displayed within the card description container.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() description?: string;\n\n\t/**\n\t * Action link for when the card is clicked.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() cardLink?: string;\n\n\t/**\n\t * The layout direction/orientation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layoutDirection?: LayoutDirection = 'vertical';\n\n\t/**\n\t * Set the card's header colour.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() headerColour?: HeaderColour;\n\n\t/**\n\t * The position of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/**\n\t * The size of the image when the card-type is set to 'horizontal'.\n\t *\n\t * This prop is only necessry when the card-type is set to 'horizontal'.\n\t *\n\t * @example\n\t * \t<ontario-card\n\t *\t\tcard-type=\"horizontal\"\n\t *\t\tlabel=\"Card Title 1\"\n\t *\t\timage=\"https://picsum.photos/200/300\"\n\t *\t\thorizontal-image-position-type=\"left\"\n\t *\t\thorizontal-image-size-type=\"one-fourth\"\n\t *\t  description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t *\t>\n\t *\t</ontario-card>\n\t */\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/**\n\t * Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t *\n\t * This is optional.\n\t *\n\t */\n\t@Prop() ariaLabelText?: string;\n\n\t@State() private cardState: CardState = {\n\t\theaderColour: undefined,\n\t\theadingLevel: undefined,\n\t\tlayoutDirection: undefined,\n\t};\n\n\t/**\n\t * Watch for changes to the `layoutDirection` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.\n\t */\n\t@Watch('layoutDirection')\n\tvalidateLayoutDirection() {\n\t\tconst isValid = this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning(\n\t\t\t\t'layout-direction',\n\t\t\t\t'<ontario-card>',\n\t\t\t\tthis.layoutDirection,\n\t\t\t\tlayoutDirectionDefinitions,\n\t\t\t\t'vertical',\n\t\t\t);\n\t\t\tthis.updateCardState('layoutDirection', 'vertical');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('layoutDirection', this.layoutDirection);\n\t}\n\n\t/**\n\t * Watch for changes to the `headingLevel` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).\n\t *\n\t * If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel() {\n\t\tconst isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');\n\t\t\tthis.updateCardState('headingLevel', 'h2');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headingLevel', this.headingLevel);\n\t}\n\n\t/**\n\t * Watch for changes to the `headerColour` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t */\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tconst isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);\n\n\t\tif (!isValid && this.headerColour !== undefined) {\n\t\t\tthis.printPropWarning('header-colour', '<ontario-card>', this.headerColour, headerColourDefinitions, 'undefined');\n\t\t\tthis.updateCardState('headerColour', undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headerColour', this.headerColour);\n\t}\n\n\t/**\n\t * Print an invalid prop warning message.\n\t *\n\t * @param {string} propName - Name of the prop\n\t * @param {string} component - Component the error is on e.g. <ontario-card>\n\t * @param {any} propValue - Value of the prop\n\t * @param {readonly any[]} acceptableValues  - readonly array of acceptable prop values\n\t * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to\n\t */\n\tprivate printPropWarning(\n\t\tpropName: string,\n\t\tcomponent: string,\n\t\tpropValue: any,\n\t\tacceptableValues: readonly any[],\n\t\tdefaultValue: string,\n\t) {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` ${propName} `)\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(` ${component} `)\n\t\t\t.addRegularText('was set to an invalid value of ')\n\t\t\t.addMonospaceText(` ${propValue} `)\n\t\t\t.addRegularText('. Only ')\n\t\t\t.addMonospaceText(printArray([...acceptableValues]))\n\t\t\t.addRegularText(' are supported values. The default value of')\n\t\t\t.addMonospaceText(` ${defaultValue} `)\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Update a key within the State Object with a value.\n\t *\n\t * Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.\n\t * If only the corresponding object key/value is updated, corresponding render changes may not happen.\n\t *\n\t * @param {keyof CardState} key - Should match a key found within `CardState`.\n\t * @param {any} value - Should match the value type associated to the key within `CardState`.\n\t */\n\tprivate updateCardState(key: keyof CardState, value: any) {\n\t\tconst cardStateCopy = { ...this.cardState };\n\t\tcardStateCopy[key] = value;\n\t\tthis.cardState = cardStateCopy;\n\t}\n\n\t/**\n\t * Returns the top level classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.cardState.layoutDirection === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the heading classes of the card.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass = this.cardState.headerColour ? `ontario-card__heading--${this.cardState.headerColour}` : '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/**\n\t * Returns the url that the card links to.\n\t *\n\t * @returns {string}\n\t */\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\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\tcomponentWillLoad() {\n\t\tthis.validateLayoutDirection();\n\t\tthis.validateHeadingLevel();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" alt={this.imageAltText} src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t{/**\n\t\t\t\t\t * h() is a stencil wrapped shorthand method for a render function, and is very\n\t\t\t\t\t * similar to the h() method or createElement() method found within React\n\t\t\t\t\t * It accepts 3 parameters:\n\t\t\t\t\t *  - a string interpretation of an HTML tag (e.g. 'h2')\n\t\t\t\t\t *  - an object of properties / attributes (e.g. 'id', 'className')\n\t\t\t\t\t *  - The innerHTML such as a string, or additional HTML elements\n\t\t\t\t\t */}\n\t\t\t\t\t{h(\n\t\t\t\t\t\tthis.cardState.headingLevel, //tag\n\t\t\t\t\t\t{ className: this.getCardHeadingClasses() }, //attributes\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>,\n\t\t\t\t\t)}\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\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/breakpoints.variables' as breakpoints;\n\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tcolumn-gap: spacing.$spacing-6;\n\trow-gap: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The number of cards to display per row.\n\t *\n\t * If no number is passed, it will default to 3.\n\t */\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set number of cards per row depending on validation result.\n\t */\n\t@State() private cardsPerRowState: number;\n\n\t/**\n\t * Watch for changes to the `cardsPerRow` property for validation purposes.\n\t *\n\t * If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t */\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) || (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n      ontario-card-collection__container\n      ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n    `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\nexport type InputProps = {\n\tautoComplete?: string;\n\tclassName?: string;\n\tid: string;\n\tname?: string;\n\ttype: string;\n\tvalue?: string | number;\n\tchecked?: boolean;\n\trequired?: boolean;\n\tinputMode?: string;\n\tplaceholder?: string;\n\tariaInvalid?: boolean;\n\tariaDescribedBy?: string;\n\tonKeyDown?: ((event: Event) => void) | undefined;\n\tonInput?: ((event: Event) => void) | undefined;\n\tonChange?: ((event: Event) => void) | undefined;\n\tonBlur?: ((event: Event) => void) | undefined;\n\tonFocus?: ((event: Event) => void) | undefined;\n\tonClick?: ((event: Event) => void) | undefined;\n\tref?: (el: HTMLInputElement) => HTMLElement;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tautoComplete,\n\tclassName,\n\tid,\n\tname,\n\tplaceholder,\n\ttype,\n\tvalue,\n\tchecked,\n\trequired,\n\tonKeyDown,\n\tonInput,\n\tonChange,\n\tonBlur,\n\tonFocus,\n\tonClick,\n\tariaInvalid,\n\tariaDescribedBy,\n\tref,\n\tinputMode,\n\t...props\n}) => {\n\treturn (\n\t\t<input\n\t\t\tautoComplete={autoComplete}\n\t\t\tclass={className}\n\t\t\tid={id}\n\t\t\tname={name}\n\t\t\ttype={type}\n\t\t\tvalue={value}\n\t\t\tchecked={checked}\n\t\t\tplaceholder={placeholder}\n\t\t\trequired={!!required}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tonInput={onInput}\n\t\t\tonChange={onChange}\n\t\t\tonBlur={onBlur}\n\t\t\tonFocus={onFocus}\n\t\t\tonClick={onClick}\n\t\t\tinputMode={inputMode}\n\t\t\tref={ref}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n","export const CaptionTypes = ['default', 'large', 'heading'] as const;\nexport type CaptionType = (typeof CaptionTypes)[number];\n","export enum MessageContentType {\n\tUndefinedCaptionObject = 'undefinedCaptionObject',\n\tUndefinedCaptionText = 'undefinedCaption',\n\tEmptyCaptionText = 'emptyCaption',\n\tUndefinedCaptionType = 'undefinedCaptionType',\n\tIncorrectCaptionType = 'incorrectCaptionType',\n}\n","import { h } from '@stencil/core';\nimport { CaptionType, CaptionTypes } from './input-caption.types';\nimport { MessageContentType } from './input-caption.enum';\nimport { CaptionInfo, Caption } from './caption.interface';\nimport { ConsoleMessageClass } from '../../console-message/console-message';\n\nexport class InputCaption implements CaptionInfo {\n\t/**\n\t * The text to display as caption.\n\t */\n\tcaptionText: string;\n\n\t/**\n\t * The type of caption to render.\n\t */\n\tcaptionType?: CaptionType = 'default';\n\n\t/**\n\t * Determine whether the input field is required.\n\t */\n\trequired?: boolean = false;\n\n\t/**\n\t * Determine whether the rendered element is a `<label>` or `<legend>`.\n\t */\n\tisLegend?: boolean = false;\n\n\t/**\n\t * Name of the component instantiating the class.\n\t * This is used for validation warning message.\n\t */\n\tcomponentTagName: string;\n\n\tlanguage: any = 'en';\n\n\ttranslations: any;\n\n\t/**\n\t * Set the class members\n\t * Output a console warning message if the provided `label` type is incorrect\n\t * @param caption object containing the essential data to configure the input label\n\t */\n\tconstructor(\n\t\tcomponentTagName: string,\n\t\tcaption: Caption | string,\n\t\ttranslations: any,\n\t\tlanguage: any,\n\t\tisLegend: boolean = false,\n\t\trequired: boolean = false,\n\t) {\n\t\tlet captionObject: Caption;\n\n\t\tif (typeof caption === 'string') {\n\t\t\ttry {\n\t\t\t\tcaptionObject = JSON.parse(caption) as Caption;\n\t\t\t} catch {\n\t\t\t\tcaptionObject = { captionText: caption, captionType: 'default' };\n\t\t\t}\n\t\t} else {\n\t\t\tcaptionObject = caption;\n\t\t}\n\n\t\tthis.componentTagName = componentTagName.toLocaleLowerCase();\n\t\tthis.captionText = captionObject?.captionText;\n\t\tthis.captionType =\n\t\t\t(captionObject?.captionType && CaptionTypes.find((type) => type === captionObject.captionType?.toLowerCase())) ||\n\t\t\t'default';\n\t\tthis.required = required;\n\t\tthis.isLegend = isLegend;\n\t\tthis.translations = translations;\n\t\tthis.language = language;\n\n\t\tthis.validateCaption(this);\n\t}\n\n\t/**\n\t * Return the `<label>` element for text inputs\n\t * @param captionFor Set the `htmlFor` attribute\n\t * @param hasHintExpander Indicate whether the component the label is for has a hint expander or not\n\t * @param disableRequiredFlag Disable the required/optional label text _(only use in highly special cases)_\n\t * @returns element containing the caption for the input\n\t */\n\tgetCaption = (\n\t\tcaptionFor?: string | undefined,\n\t\thasHintExpander: boolean = false,\n\t\tdisableRequiredFlag: boolean = false,\n\t): HTMLElement => {\n\t\tconst captionText = this.captionText && this.captionText.toLowerCase();\n\t\tconst captionContent = this.isLegend ? (\n\t\t\t<legend class={this.getClass()}>\n\t\t\t\t{this.captionType === 'heading' ? <h1>{this.captionText}</h1> : this.captionText}\n\t\t\t\t{!disableRequiredFlag && this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</legend>\n\t\t) : (\n\t\t\t<label htmlFor={captionFor} class={this.getClass()}>\n\t\t\t\t{this.captionText}\n\t\t\t\t{!disableRequiredFlag && this.getRequiredFlagElement()}\n\t\t\t\t{hasHintExpander && this.getHintExpanderAccessibilityText(captionText, false)}\n\t\t\t</label>\n\t\t);\n\n\t\t// with `this.captionType` already set to one of the enum values, the comparison no longer needs the `toLowerCase()` transform\n\t\treturn this.captionType === 'heading' && !this.isLegend ? <h1>{captionContent}</h1> : captionContent;\n\t};\n\n\tgetHintExpanderAccessibilityText(captionText: string, hasHintExpanderOnOption: boolean = false): HTMLElement {\n\t\tconst multipleOptionsMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.checkboxHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\n\t\tconst singleOptionMessage = (\n\t\t\t<span class=\"ontario-show-for-sr\">\n\t\t\t\t{this.translations.accessibility.moreInfo[this.language]} \"{captionText.toLowerCase()}\"{' '}\n\t\t\t\t{this.translations.accessibility.singleHintExpander[this.language]}\n\t\t\t</span>\n\t\t);\n\t\treturn this.componentTagName === 'ontario-checkboxes'\n\t\t\t? !hasHintExpanderOnOption\n\t\t\t\t? multipleOptionsMessage\n\t\t\t\t: singleOptionMessage\n\t\t\t: singleOptionMessage;\n\t}\n\n\t/**\n\t * Determines which flag text to use between `required` and `optional`\n\t * @returns `required` or `optional` flag text\n\t */\n\tprivate getRequiredFlagText(): string {\n\t\treturn this.required\n\t\t\t? this.translations && `(${this.translations.required[this.language]})`\n\t\t\t: this.translations && `(${this.translations.optional[this.language]})`;\n\t}\n\n\t/**\n\t * Get the HTML for the required/optional flag.\n\t * @returns CSS class for the label/legend.\n\t */\n\tprivate getRequiredFlagElement(): HTMLElement {\n\t\treturn <span class=\"ontario-label__flag\">{this.getRequiredFlagText()}</span>;\n\t}\n\n\t/**\n\t * Get the CSS class for the `label` element.\n\t * @returns CSS class for the `label` element.\n\t */\n\tprivate getClass(): string {\n\t\treturn this.captionType === 'large' || this.captionType === 'heading'\n\t\t\t? this.isLegend\n\t\t\t\t? `ontario-fieldset__legend ontario-fieldset__legend--${this.captionType}`\n\t\t\t\t: `ontario-label ontario-label--${this.captionType}`\n\t\t\t: this.isLegend\n\t\t\t\t? 'ontario-fieldset__legend'\n\t\t\t\t: 'ontario-label';\n\t}\n\n\t/**\n\t * Validate caption input by user and output warning message to the console if:\n\t * 1. the `caption` object is not provided\n\t * 2. the `captionText` property of the `caption` object is not provided\n\t * 3. the `captionText` property of the `caption` object is empty or contain only spaces\n\t * 4. the `captionType` property of the `caption` object is not provided\n\t * 5. the `captionType` property of the `caption` object is incorrect\n\t */\n\tprivate validateCaption(caption?: InputCaption) {\n\t\tlet messageType;\n\n\t\t// undefined `caption` object\n\t\tif (!caption || Object.keys(caption).length <= 0) {\n\t\t\tmessageType = MessageContentType.UndefinedCaptionObject;\n\t\t} else {\n\t\t\t// undefined `captionText` property\n\t\t\tif (!caption.captionText) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionText;\n\t\t\t} else {\n\t\t\t\t// `captionText` that is empty or contains only spaces\n\t\t\t\tif (/^\\s*$/.test(caption.captionText)) {\n\t\t\t\t\tmessageType = MessageContentType.EmptyCaptionText;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// undefined `captionType`\n\t\t\tif (!caption.captionType) {\n\t\t\t\tmessageType = MessageContentType.UndefinedCaptionType;\n\t\t\t} else {\n\t\t\t\t// incorrect `captionType`\n\t\t\t\tif (!CaptionTypes.includes(caption?.captionType?.toLowerCase() as CaptionType)) {\n\t\t\t\t\tmessageType = MessageContentType.IncorrectCaptionType;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (messageType) {\n\t\t\tconst message = new ConsoleMessageClass().addDesignSystemTag();\n\n\t\t\tif (messageType !== MessageContentType.UndefinedCaptionObject) {\n\t\t\t\tmessage\n\t\t\t\t\t.addMonospaceText(\n\t\t\t\t\t\t` ${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText ||\n\t\t\t\t\t\t\tmessageType === MessageContentType.UndefinedCaptionText\n\t\t\t\t\t\t\t\t? 'caption or captionText'\n\t\t\t\t\t\t\t\t: 'captionType'\n\t\t\t\t\t\t} `,\n\t\t\t\t\t)\n\t\t\t\t\t.addRegularText('object or property of');\n\t\t\t}\n\n\t\t\tmessage.addMonospaceText(' caption ').addRegularText('object on').addMonospaceText(` ${this.componentTagName} `);\n\t\t\tthis.printConsoleMessage(messageType, message, this.getRequiredFlagText());\n\t\t}\n\t}\n\n\t/**\n\t * Generate the content of warning message to be printed to the console\n\t * @param messageType determine the content of warning message to output\n\t * @param componentTagName the tag name of the component that's emitting the warning message\n\t * @param requiredFlagText accepts a string value to be used as the required flag text and defaults to `(optional)` if not set\n\t * @returns an array of `ConsoleMessage` objects containing the message and associated styles to be printed to the console\n\t */\n\tprivate printConsoleMessage(\n\t\tmessageType: MessageContentType,\n\t\tmessage: ConsoleMessageClass,\n\t\trequiredFlagText: string = '(optional)',\n\t) {\n\t\tswitch (messageType) {\n\t\t\t// undefinedCaptionObject example: caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// undefinedCaptionText example: captionText property of caption object on <ontario-input> is required but not defined. A blank followed by a (optional) flag is assumed.\n\t\t\t// EmptyCaptionText example: captionText property of caption object on <ontario-input> is empty or contains only spaces. A blank followed by a (optional) flag is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionObject:\n\t\t\tcase MessageContentType.UndefinedCaptionText:\n\t\t\tcase MessageContentType.EmptyCaptionText:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t`${\n\t\t\t\t\t\t\tmessageType === MessageContentType.EmptyCaptionText\n\t\t\t\t\t\t\t\t? 'is empty or contains only spaces'\n\t\t\t\t\t\t\t\t: 'is required but not defined'\n\t\t\t\t\t\t}. A blank followed by a`,\n\t\t\t\t\t)\n\t\t\t\t\t.addMonospaceText(` ${requiredFlagText} `)\n\t\t\t\t\t.addRegularText('flag is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// UndefinedCaptionType example: captionType property of caption object on <ontario-input> is not defined. The default type is assumed.\n\t\t\tcase MessageContentType.UndefinedCaptionType:\n\t\t\t\tmessage.addRegularText('is not defined. The').addMonospaceText(' default ').addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\n\t\t\t// IncorrectCaptionType example: captionType property of caption object on <ontario-input> was set to an incorrect type; only default, heading or large type is allowed. The default type is assumed.\n\t\t\tcase MessageContentType.IncorrectCaptionType:\n\t\t\t\tmessage\n\t\t\t\t\t.addRegularText('was set to an incorrect type; only')\n\t\t\t\t\t.addMonospaceText(' default, heading, ')\n\t\t\t\t\t.addRegularText('or')\n\t\t\t\t\t.addMonospaceText(' large ')\n\t\t\t\t\t.addRegularText('type is allowed. The')\n\t\t\t\t\t.addMonospaceText(' default ')\n\t\t\t\t\t.addRegularText('type is assumed.');\n\t\t\t\tbreak;\n\t\t}\n\n\t\tmessage.printMessage();\n\t}\n}\n","import { Hint } from '../../common/common.interface';\n\nexport const constructHintTextObject = (hintText: string | Hint) => {\n\tlet hintTextObject: Hint = { hint: '', hintContentType: 'string' };\n\n\tif (hintText) {\n\t\tif (typeof hintText === 'string') {\n\t\t\ttry {\n\t\t\t\thintTextObject = JSON.parse(hintText) as Hint;\n\t\t\t} catch {\n\t\t\t\thintTextObject = { hint: hintText, hintContentType: 'string' };\n\t\t\t}\n\t\t} else {\n\t\t\thintTextObject = hintText;\n\t\t}\n\t}\n\n\treturn hintTextObject;\n};\n","export enum EventType {\n\tChange = 'change',\n\tBlur = 'blur',\n\tFocus = 'focus',\n\tInput = 'input',\n}\n\nexport type InputInteractionEvent = {\n\tid?: string;\n\tvalue?: string;\n};\n\nexport type InputInputEvent = InputInteractionEvent & {\n\tinputType?: string;\n};\n\nexport type RadioAndCheckboxChangeEvent = InputInteractionEvent & {\n\tchecked: boolean;\n};\n\nexport type InputFocusBlurEvent = InputInteractionEvent & {\n\tfocused: boolean;\n};\n\nexport type InputType = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;\n","import { EventEmitter } from '@stencil/core';\nimport {\n\tInputType,\n\tEventType,\n\tInputFocusBlurEvent,\n\tInputInteractionEvent,\n\tRadioAndCheckboxChangeEvent,\n\tInputInputEvent,\n} from './event-handler.interface';\n\nexport const handleInputEvent = (\n\tevent: Event,\n\teventType: EventType,\n\tinput: InputType,\n\tinputChangeEvent: EventEmitter<InputInteractionEvent | RadioAndCheckboxChangeEvent>,\n\tinputFocusEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputBlurEvent: EventEmitter<InputFocusBlurEvent>,\n\tinputInputEvent?: EventEmitter<InputInputEvent>,\n\ttype?: string,\n\tcustomChangeFunction?: (event: Event) => void,\n\tcustomFocusFunction?: (event: Event) => void,\n\tcustomBlurFunction?: (event: Event) => void,\n\tcustomInputFunction?: (event: Event) => void,\n\thostElement?: HTMLElement,\n) => {\n\tif (eventType === EventType.Input) {\n\t\tinputInputEvent?.emit({\n\t\t\tid: input?.id,\n\t\t\tvalue: (event as InputEvent).data ?? undefined,\n\t\t\tinputType: (event as InputEvent).inputType,\n\t\t});\n\n\t\tcustomInputFunction && customInputFunction(event);\n\t}\n\n\tif (eventType === EventType.Change) {\n\t\tif (type === 'radio' || type === 'checkbox') {\n\t\t\tif (input instanceof HTMLInputElement) {\n\t\t\t\tinputChangeEvent.emit({\n\t\t\t\t\tchecked: input?.checked,\n\t\t\t\t\tid: input?.id,\n\t\t\t\t\tvalue: input?.value,\n\t\t\t\t});\n\t\t\t}\n\t\t} else {\n\t\t\tinputChangeEvent.emit({\n\t\t\t\tid: input?.id,\n\t\t\t\tvalue: input?.value,\n\t\t\t});\n\t\t}\n\n\t\tcustomChangeFunction && customChangeFunction(event);\n\n\t\t// Note: Change events don't have composable set to true and don't cross the ShadowDOM boundary.\n\t\t// This will emit an event so the normal `onChange` event pattern is maintained.\n\t\thostElement && emitEvent(hostElement, eventType, event);\n\t}\n\n\tif (eventType === EventType.Focus) {\n\t\tinputFocusEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: true,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomFocusFunction && customFocusFunction(event);\n\t}\n\n\tif (eventType === EventType.Blur) {\n\t\tinputBlurEvent.emit({\n\t\t\tid: input?.id,\n\t\t\tfocused: false,\n\t\t\tvalue: input?.value,\n\t\t});\n\n\t\tcustomBlurFunction && customBlurFunction(event);\n\t}\n};\n\n/**\n * Emit a custom event that can be subscribed to by an event listener.\n *\n * @param element Component host element, see https://stenciljs.com/docs/host-element\n * @param name name of the event\n * @param detail any relevant details, like the original event\n */\nexport const emitEvent = (element: HTMLElement, name: string, detail?: any) => {\n\telement.dispatchEvent(new CustomEvent(name, { composed: true, bubbles: true, detail }));\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { isEmpty } from '../../../utils/helper/utils';\n\nexport type ErrorMessageProps = {\n\terror?: boolean;\n\tmessage?: string;\n};\n\nexport const ErrorMessage: FunctionalComponent<ErrorMessageProps> = ({ message, error = false }) => {\n\tconst hideError = !error || isEmpty(message);\n\n\treturn (\n\t\t<div role=\"alert\" class={`ontario-error-messaging ${hideError ? 'ontario-error__hidden' : ''}`}>\n\t\t\t<ontario-icon-alert-error></ontario-icon-alert-error>\n\t\t\t<div class=\"ontario-error-messaging__content\">{message}</div>\n\t\t</div>\n\t);\n};\n","@use 'sass:math';\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/2-tools/functions/global.functions' as globalFunctions;\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/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\n\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-checkboxes-size: globalFunctions.px-to-rem(28);\n$ontario-checkboxes-size-mobile: globalFunctions.px-to-rem(32);\n$ontario-checkbox-border-size: globalFunctions.px-to-rem(2);\n$ontario-checkbox-box-shadow-outline: globalFunctions.px-to-rem(4);\n\n:host {\n\t--checkbox-bg: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z' fill='%231a1a1a'/%3E%3Cpath d='M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z' fill='%23fff'/%3E%3C/svg%3E\");\n}\n\n.ontario-checkboxes {\n\tmargin-bottom: spacing.$spacing-7;\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-checkboxes__item {\n\tposition: relative;\n\tmargin: 0 0 spacing.$spacing-4;\n\tpadding: 0 0 0 spacing.$spacing-6;\n\tmin-height: $ontario-checkboxes-size;\n\tbox-sizing: content-box;\n\n\t&:last-of-type {\n\t\tmargin: 0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tpadding: 0 0 0 spacing.$spacing-7;\n\t\tmin-height: $ontario-checkboxes-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__input {\n\tcursor: pointer;\n\tmargin: 0;\n\tposition: absolute;\n\ttop: -$ontario-checkbox-border-size;\n\tleft: -$ontario-checkbox-border-size;\n\topacity: 0;\n\twidth: globalVariables.$touch-target-size;\n\theight: globalVariables.$touch-target-size;\n\tz-index: zIndex.$ontario-z-index-neutral;\n\n\t// prevent blue default highlighting of input on android\n\t-webkit-tap-highlight-color: transparent;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: globalVariables.$touch-target-size-mobile;\n\t\theight: globalVariables.$touch-target-size-mobile;\n\t}\n}\n\n.ontario-checkboxes__label {\n\tdisplay: inline-block;\n\tcursor: pointer;\n\tline-height: globalVariables.$line-height-default;\n\t// Specific spacing required in order to visually align label with input\n\tmargin: spacing.$spacing-1 0;\n\tpadding: 0 spacing.$spacing-4;\n\twidth: auto;\n\twhite-space: normal;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t// Specific spacing required in order to visually align label with input\n\t\tmargin: 0.33rem 0;\n\t}\n\n\t// [ ] Check box styles\n\t&:before {\n\t\tcontent: '';\n\t\tborder: $ontario-checkbox-border-size solid colours.$ontario-colour-black;\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: $ontario-checkboxes-size-mobile;\n\t\theight: $ontario-checkboxes-size-mobile;\n\t\ttransition: border 0.1s ease-in-out;\n\t\tdisplay: block;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-checkboxes-size;\n\t\t\theight: $ontario-checkboxes-size;\n\t\t}\n\t}\n\n\t// ✔✔✔ Check mark styles ✔✔✔\n\t&:after {\n\t\tcontent: '';\n\t\tbackground-image: var(--checkbox-bg);\n\t\tbackground-repeat: no-repeat;\n\t\theight: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\twidth: $ontario-checkboxes-size + $ontario-checkbox-border-size;\n\t\tposition: absolute;\n\t\ttop: math.div($ontario-checkbox-border-size, 2);\n\t\tleft: math.div($ontario-checkbox-border-size, 2);\n\t\tright: 0;\n\t\tbottom: 0;\n\t\topacity: 0;\n\t\tdisplay: block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\theight: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t\twidth: $ontario-checkboxes-size-mobile + $ontario-checkbox-border-size;\n\t\t}\n\t}\n}\n\n.ontario-checkboxes__input:focus + .ontario-checkboxes__label:before {\n\t-moz-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\t-webkit-box-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\tbox-shadow: 0 0 0 $ontario-checkbox-box-shadow-outline colours.$ontario-colour-focus;\n\toutline: $ontario-checkbox-box-shadow-outline solid transparent;\n\ttransition: all 0.1s ease-in-out;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:after {\n\topacity: 1;\n}\n\n.ontario-checkboxes__input:checked + .ontario-checkboxes__label:before {\n\tbackground-color: colours.$ontario-colour-black;\n}\n\n.ontario-checkboxes__hint-expander {\n\tmargin: spacing.$spacing-3 0 0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, h, Prop, Element, Event, EventEmitter, Listen, State, Watch, AttachInternals } from '@stencil/core';\n\nimport { Input } from '../../utils/common/input/input';\nimport { CheckboxOption } from './checkbox-option.interface';\nimport { Checkboxes } from './checkboxes.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tRadioAndCheckboxChangeEvent,\n\tEventType,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-checkboxes',\n\tstyleUrl: 'ontario-checkboxes.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioCheckboxes implements Checkboxes {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the checkbox legend.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t *   caption='{\n\t *     \"captionText\": \"Checkbox legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   ...>\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name for the checkboxes. 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 checkbox group.\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the checkbox group.\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-checkboxes\n\t *   caption='{\n\t *     \"captionText\": \"Checkbox legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   name='ontario-checkboxes'\n\t *   options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\",\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t *\t\t}\n\t *   }]'\n\t *   hint-expander='{\n\t *    \"hint\": \"Hint expander for the checkbox group\",\n\t *    \"content\": \"Example hint expander content for the checkbox group\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The options for the checkbox group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple checkboxes in a fieldset, each checkbox will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two checkboxes to be displayed in the fieldset.\n\t *\n\t * @example\n\t * <ontario-checkboxes\n\t *   caption='{\n\t *\t\t\"captionText\": \"Checkbox legend\",\n\t *\t\t\"captionType\": \"heading\",\n\t *   }\n\t *   name=\"ontario-checkboxes\",\n\t *   hint-text=\"Hint text for the checkbox group.\"\n\t *   options='[\n\t *\t\t{\n\t *\t\t\t\"value\": \"checkbox-option-1\",\n\t *\t\t\t\"label\": \"Checkbox option 1 label\"\n\t *\t\t\t\"elementId\": \"checkbox-1\"\n\t *     },\n\t *     {\n\t *        \"value\": \"checkbox-option-2\",\n\t *        \"label\": \"Checkbox option 2 label\",\n\t * \t\t  \"elementId\": \"checkbox-2\",\n\t *\t      \"hintExpander\": {\n\t *\t\t\t\t\"hint\": \"Hint expander for checkbox option 2\",\n\t *              \"content\": \"Example hint expander content for checkbox option 2\"\n\t *        }\n\t *      }\n\t *   ]'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-checkboxes>\n\t */\n\t@Prop() options: CheckboxOption[] | string;\n\n\t/**\n\t * This is used to determine whether the checkbox is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the checkbox 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 checkbox 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 checkbox onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the checkbox fieldset. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * The 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 * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: CheckboxOption[];\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a checkbox option has been changed.\n\t */\n\t@Event() checkboxOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has lost focus.\n\t */\n\t@Event() checkboxOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a checkbox option has gained focus.\n\t */\n\t@Event() checkboxOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ 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 */\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 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 `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\t\tthis.validateOptions(this.internalOptions);\n\t}\n\n\t/**\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t *\n\t * @param newValue object to be validated\n\t */\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-checkboxes> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `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-checkboxes> ')\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 `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\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle checkbox events and the information pertaining to the checkbox to emit.\n\t */\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\tif (input) {\n\t\t\tinput.checked = input.checked ?? '';\n\t\t}\n\n\t\t// Update internalOptions checked state\n\t\tconst changedOption = this.internalOptions.find((x) => x.value === input?.value);\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.checkboxOnChange,\n\t\t\tthis.checkboxOnFocus,\n\t\t\tthis.checkboxOnBlur,\n\t\t\tundefined,\n\t\t\t'checkbox',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\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 fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintExpander();\n\t\tthis.parseHintText();\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<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t\t<div class=\"ontario-checkboxes\">\n\t\t\t\t\t\t{this.internalOptions?.map((checkbox) => (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-checkboxes__input\"\n\t\t\t\t\t\t\t\t\tid={checkbox.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\t\t\t\tvalue={checkbox.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!checkbox.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-checkboxes__label\" htmlFor={checkbox.elementId}>\n\t\t\t\t\t\t\t\t\t{checkbox.label}\n\t\t\t\t\t\t\t\t\t{checkbox.hintExpander && this.captionState.getHintExpanderAccessibilityText(checkbox.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{checkbox.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={checkbox.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={checkbox.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={checkbox.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-checkboxes__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\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/font-weights.variables' as fontWeights;\n@use '../../styles/grid.scss';\n\n$ontario-critical-alert-icon-size: 28px;\n$ontario-critical-alert-z-index: 10;\n$ontario-critical-alert-svg-margin--custom: 0.85rem;\n$ontario-critical-alert-line-height: 1.8;\n\n.ontario-critical-alert {\n\tbackground-color: colours.$ontario-colour-warning;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-4 spacing.$spacing-0;\n\tposition: relative;\n\tz-index: $ontario-critical-alert-z-index;\n}\n\n.ontario-critical-alert__body {\n\tdisplay: flex;\n\tflex-wrap: nowrap;\n}\n\n.ontario-critical-alert__icon {\n\tdisplay: flex;\n\n\tsvg {\n\t\twidth: $ontario-critical-alert-icon-size;\n\t\theight: $ontario-critical-alert-icon-size;\n\t\tmargin: spacing.$spacing-0 $ontario-critical-alert-svg-margin--custom spacing.$spacing-0 spacing.$spacing-0;\n\t}\n}\n\n.ontario-critical-alert p {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\tline-height: $ontario-critical-alert-line-height;\n}\n\n.ontario-critical-alert a {\n\tcolor: colours.$ontario-colour-black;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-black;\n\t}\n}\n\n// Slotted content styles\n.ontario-critical-alert ::slotted(a) {\n\tcolor: colours.$ontario-colour-black !important;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n}\n\n.ontario-critical-alert ::slotted(a:hover),\n.ontario-critical-alert ::slotted(a:focus) {\n\ttext-decoration: none !important;\n}\n\n.ontario-critical-alert ::slotted(a:visited) {\n\tcolor: colours.$ontario-colour-black;\n}\n","import { Component, h, Prop, Watch, Element } from '@stencil/core';\n\nimport { CriticalAlert } from './ontario-critical-alert.interface';\nimport OntarioIconCriticalAlertWarning from '../ontario-icon/assets/ontario-icon-critical-alert-warning.svg';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-critical-alert',\n\tstyleUrl: 'ontario-critical-alert.scss',\n\tshadow: true,\n})\nexport class OntarioCriticalAlert implements CriticalAlert {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Content for critical alert message. It can be either string or HTML content. The content is already wrapped in a paragraph tag, so if using HTML content, the paragraph tag can be ommitted.\n\t *\n\t * @example\n\t * <ontario-critical-alert content=\"COVID-19 State of emergency extended until May 12, 2020.\"></ontario-critical-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-critical-alert>\n\t *  <a href=\"#\">COVID-19 State of emergency</a> extended until May 12, 2020.\n\t * </ontario-critical-alert>\n\t */\n\t@Prop() content: string | HTMLElement;\n\n\t/**\n\t * Watch for changes to the `content` prop value.\n\t *\n\t * If no `content` prop was passed, or no host element textContent exists, a warning message will be printed.\n\t *\n\t * @param newValue string | HTMLElement\n\t */\n\t@Watch('content')\n\tvalidateCriticalAlertContent(newValue: string | HTMLElement) {\n\t\t// if no slot is passed, run the `validatePropExists` function\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\t/**\n\t\t\t\t * Print the quote warning message\n\t\t\t\t */\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' content ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-critical-alert> ')\n\t\t\t\t\t.addRegularText('was not provided.')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate renderContent() {\n\t\tconst content = this.content;\n\n\t\tif (typeof content === 'string') {\n\t\t\treturn content;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCriticalAlertContent(this.content);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-critical-alert\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-column ontario-small-12\">\n\t\t\t\t\t\t<div class=\"ontario-critical-alert__body\">\n\t\t\t\t\t\t\t<div class=\"ontario-critical-alert__icon\" innerHTML={OntarioIconCriticalAlertWarning}></div>\n\t\t\t\t\t\t\t<p>{this.renderContent()}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n    byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n    return (byteToHex[arr[offset + 0]] +\n        byteToHex[arr[offset + 1]] +\n        byteToHex[arr[offset + 2]] +\n        byteToHex[arr[offset + 3]] +\n        '-' +\n        byteToHex[arr[offset + 4]] +\n        byteToHex[arr[offset + 5]] +\n        '-' +\n        byteToHex[arr[offset + 6]] +\n        byteToHex[arr[offset + 7]] +\n        '-' +\n        byteToHex[arr[offset + 8]] +\n        byteToHex[arr[offset + 9]] +\n        '-' +\n        byteToHex[arr[offset + 10]] +\n        byteToHex[arr[offset + 11]] +\n        byteToHex[arr[offset + 12]] +\n        byteToHex[arr[offset + 13]] +\n        byteToHex[arr[offset + 14]] +\n        byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n    const uuid = unsafeStringify(arr, offset);\n    if (!validate(uuid)) {\n        throw TypeError('Stringified UUID is invalid');\n    }\n    return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n    if (!getRandomValues) {\n        if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n            throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n        }\n        getRandomValues = crypto.getRandomValues.bind(crypto);\n    }\n    return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n    if (native.randomUUID && !buf && !options) {\n        return native.randomUUID();\n    }\n    options = options || {};\n    const rnds = options.random ?? options.rng?.() ?? rng();\n    if (rnds.length < 16) {\n        throw new Error('Random bytes length must be >= 16');\n    }\n    rnds[6] = (rnds[6] & 0x0f) | 0x40;\n    rnds[8] = (rnds[8] & 0x3f) | 0x80;\n    if (buf) {\n        offset = offset || 0;\n        if (offset < 0 || offset + 16 > buf.length) {\n            throw new RangeError(`UUID byte range ${offset}:${offset + 15} is out of buffer bounds`);\n        }\n        for (let i = 0; i < 16; ++i) {\n            buf[offset + i] = rnds[i];\n        }\n        return buf;\n    }\n    return unsafeStringify(rnds);\n}\nexport default v4;\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { DateInputFieldType } from '../ontario-date-input-interface';\nimport { Input as CommonInput } from '../../../utils/common/input/input';\n\nexport type InputProps = {\n\tid: string;\n\ttype: DateInputFieldType;\n\tlabel: string;\n\taccessibilityLabel: string;\n\terror?: boolean;\n\tonInput: (value: string, fieldType: DateInputFieldType) => void;\n\tonChange: (value: string, fieldType: DateInputFieldType) => void;\n\tonBlur: (fieldType: DateInputFieldType) => void;\n\tonFocus: (fieldType: DateInputFieldType) => void;\n\tplaceholder?: string;\n\trequired?: boolean;\n\tariaDescribedBy?: string;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tid,\n\ttype,\n\tlabel,\n\taccessibilityLabel,\n\tplaceholder,\n\tonInput,\n\tonChange,\n\tonFocus,\n\tonBlur,\n\tariaDescribedBy,\n\terror = false,\n\trequired = false,\n}) => {\n\tconst handleInputInput = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonInput(newValue, type);\n\t};\n\n\tconst handleInputChange = (event: Event) => {\n\t\tconst newValue = (event.target as HTMLInputElement)?.value ?? '';\n\t\tonChange(newValue, type);\n\t};\n\n\tconst handleInputFocus = () => {\n\t\tonFocus(type);\n\t};\n\n\tconst handleInputBlur = () => {\n\t\tonBlur(type);\n\t};\n\n\treturn (\n\t\t<div class={`ontario-date__group-input ${error ? 'ontario-date--error' : ''}`}>\n\t\t\t<label htmlFor={id}>\n\t\t\t\t{label}\n\t\t\t\t<span class=\"ontario-show-for-sr\">({accessibilityLabel})</span>\n\t\t\t</label>\n\t\t\t<CommonInput\n\t\t\t\tclassName=\"ontario-input ontario-input--4-char-width\"\n\t\t\t\ttype=\"text\"\n\t\t\t\tinputMode=\"numeric\"\n\t\t\t\tid={id}\n\t\t\t\trequired={!!required}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tonInput={handleInputInput}\n\t\t\t\tonChange={handleInputChange}\n\t\t\t\tonFocus={handleInputFocus}\n\t\t\t\tonBlur={handleInputBlur}\n\t\t\t\tariaInvalid={error}\n\t\t\t\tariaDescribedBy={ariaDescribedBy}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n","export const DAY_MIN_VALUE = 1;\nexport const DAY_MAX_VALUE = 31;\nexport const MONTH_MIN_VALUE = 1;\nexport const MONTH_MAX_VALUE = 12;\nexport const YEAR_MIN_VALUE = 999;\nexport const YEAR_MAX_VALUE = 9999;\n","import {\n\tDAY_MIN_VALUE,\n\tDAY_MAX_VALUE,\n\tMONTH_MIN_VALUE,\n\tMONTH_MAX_VALUE,\n\tYEAR_MIN_VALUE,\n\tYEAR_MAX_VALUE,\n} from '../constants';\nimport { DateValidatorReturnType } from '../ontario-date-input-interface';\nimport { isNumber, isEmpty } from '../../../utils/helper/utils';\nimport { Translations } from '../../../translations';\n/*\n * Day field should be a number, not negative, no greater than “31”\n */\nconst isInvalidDay = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst day = Number(value);\n\n\treturn day < DAY_MIN_VALUE || day > DAY_MAX_VALUE;\n};\n\n/*\n * Month field should be a number, not negative, no greater than “12”\n */\nconst isInvalidMonth = (value: string) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst month = Number(value);\n\n\treturn month < MONTH_MIN_VALUE || month > MONTH_MAX_VALUE;\n};\n\n/**\n * Valid value year against minimum and maximum year range (defaulted if not provided.)\n *\n * Year field should be a number and not written out; it has no concept of positive and negative.\n *\n * Suggestion:\n * - `< 0` B.C.E.\n * - `>= 0` A.C.E.\n *\n * @param value value to check for validity\n * @param minYear minimum valid year to validate against\n * @param maxYear maximum valid year to validate against\n */\nexport const isInvalidYear = (\n\tvalue: string | number,\n\tminYear: number = YEAR_MIN_VALUE,\n\tmaxYear: number = YEAR_MAX_VALUE,\n) => {\n\tif (!isNumber(value)) {\n\t\treturn true;\n\t}\n\n\tconst year = Number(value);\n\n\treturn year < minYear || year > maxYear;\n};\n\ntype GetDateErrorArg = {\n\tdayValue: string;\n\tmonthValue: string;\n\tyearValue: string;\n\terrorMessages: Translations['dateInput']['error']['en'];\n\tminYear?: number;\n\tmaxYear?: number;\n\tdayVisible: boolean;\n\tmonthVisible: boolean;\n\tyearVisible: boolean;\n};\n/**\n * Helper function to get error message for birthdate validation\n */\nexport const getDateErrorMessage = ({\n\tdayValue,\n\tmonthValue,\n\tyearValue,\n\terrorMessages,\n\tminYear,\n\tmaxYear,\n\tdayVisible,\n\tmonthVisible,\n\tyearVisible,\n}: GetDateErrorArg): DateValidatorReturnType => {\n\tconst {\n\t\temptyDay,\n\t\temptyMonth,\n\t\temptyYear,\n\t\temptyDayAndMonth,\n\t\temptyDayAndYear,\n\t\temptyMonthAndYear,\n\t\tinvalidDate,\n\t\tinvalidDay,\n\t\tinvalidMonth,\n\t\tinvalidYear,\n\t} = errorMessages;\n\n\tlet error = '';\n\tlet dayInvalid = false;\n\tlet monthInvalid = false;\n\tlet yearInvalid = false;\n\n\tconst isDayEmpty = dayVisible && isEmpty(dayValue);\n\tconst isMonthEmpty = monthVisible && isEmpty(monthValue);\n\tconst isYearEmpty = yearVisible && isEmpty(yearValue);\n\t/*\n\t *  If one ore more fields are valid but others are empty:\n\t *  1 field empty:\n\t *  Day as empty - “Enter the day.”\n\t *  Month as empty - “Enter the month.”\n\t *  Year as empty - “Enter the year.”\n\t *  2 fields empty:\n\t *  Month and day empty - “Enter the month and day.”\n\t *  Year and day empty - “Enter the year and day.”\n\t *  Year and month empty - “Enter the year and month.”\n\t */\n\tif (isDayEmpty && isMonthEmpty && isYearEmpty) {\n\t\terror = invalidDate;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isDayEmpty && isMonthEmpty) {\n\t\terror = emptyDayAndMonth;\n\t\tdayInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty && isYearEmpty) {\n\t\terror = emptyDayAndYear;\n\t\tdayInvalid = true;\n\t\tyearInvalid = true;\n\t} else if (isMonthEmpty && isYearEmpty) {\n\t\terror = emptyMonthAndYear;\n\t\tyearInvalid = true;\n\t\tmonthInvalid = true;\n\t} else if (isDayEmpty) {\n\t\terror = emptyDay;\n\t\tdayInvalid = true;\n\t} else if (isMonthEmpty) {\n\t\terror = emptyMonth;\n\t\tmonthInvalid = true;\n\t} else if (isYearEmpty) {\n\t\terror = emptyYear;\n\t\tyearInvalid = true;\n\t}\n\n\tconst isDayInvalid = dayVisible && isInvalidDay(dayValue);\n\tconst isMonthInvalid = monthVisible && isInvalidMonth(monthValue);\n\tconst isYearInvalid = yearVisible && isInvalidYear(yearValue, minYear, maxYear);\n\t/*\n\t *  If only one error, specify where the error occurs\n\t *  E.g. “Enter a valid day.”, “Enter a valid month.” Or “Enter a valid year.”\n\t *  If 2 or more fields have error (or all 3), say “Enter a valid date.”\n\t *  If one or more fields are invalid but the others are empty say: “Enter a valid date.”\n\t */\n\tif (isEmpty(error)) {\n\t\tif (isDayInvalid && isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isDayInvalid && isMonthInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tdayInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid && isYearInvalid) {\n\t\t\terror = invalidDate;\n\t\t\tmonthInvalid = true;\n\t\t\tyearInvalid = true;\n\t\t} else if (isYearInvalid) {\n\t\t\terror = invalidYear;\n\t\t\tyearInvalid = true;\n\t\t} else if (isMonthInvalid) {\n\t\t\terror = invalidMonth;\n\t\t\tmonthInvalid = true;\n\t\t} else if (isDayInvalid) {\n\t\t\terror = invalidDay;\n\t\t\tdayInvalid = true;\n\t\t}\n\t}\n\n\treturn { errorMessage: error, dayInvalid, monthInvalid, yearInvalid };\n};\n","import { DateInputFieldType } from '../ontario-date-input-interface';\n\nexport const getVisibleDateFields = (dateOptions: Array<DateInputFieldType>) => {\n\tconst dayVisible = dateOptions.includes('day');\n\tconst monthVisible = dateOptions.includes('month');\n\tconst yearVisible = dateOptions.includes('year');\n\n\treturn { dayVisible, monthVisible, yearVisible };\n};\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/spacing.variables' as spacing;\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/global.variables' as globalVariables;\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-date__group {\n\tdisplay: flex;\n\n\tlabel {\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t}\n\n\tinput {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n.ontario-date__group-input {\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-right: spacing.$spacing-5;\n}\n\n.ontario-date--error {\n\tinput {\n\t\tborder: 0.125rem solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, EventEmitter, Element, Watch, Event, Prop, h, State, Listen, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { translations, Translations } from '../../translations';\nimport { Input } from './components';\nimport { getDateErrorMessage, getVisibleDateFields } from './utils';\nimport { DateInputFieldType, DateInputPlaceholder, DateValidatorReturnType } from './ontario-date-input-interface';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { emitEvent } from '../../utils/events/event-handler';\n\n@Component({\n\ttag: 'ontario-date-input',\n\tstyleUrl: 'ontario-date-input.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioDateInput {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\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 none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * A boolean value to determine whether or not the date input is required.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * An object value used to set the placeholder text for the day, month and year input fields. Any combination of the three input fields (i.e day, month, year)\n\t * of the date component can be overridden.\n\t *\n\t * This is optional. If no prop is passed, it will not display any placeholder text.\n\t */\n\t@Prop() placeholder?: DateInputPlaceholder | string;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-date-input\n\t *   caption='{\n\t *     \"captionText\": \"Exact Date\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-date-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 * A number value indicating minimum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `999`.\n\t */\n\t@Prop() minYear?: number;\n\n\t/**\n\t * A number value indicating maximum value allowed for year input field of the date component.\n\t *\n\t * This is optional. If no prop is passed, it will default to `9999`.\n\t */\n\t@Prop() maxYear?: number;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the date input group.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string;\n\n\t/**\n\t * An array value used to display date options. For example, only the day and month fields can be displayed by\n\t * specifying the dateOptions as `[\"day\", \"month\"]`, etc.\n\t *\n\t * This is optional. If no prop for `dateOptions` is passed, it will default to `[\"day\", \"month\", \"year\"]`.\n\t */\n\t@Prop() dateOptions?: string | Array<DateInputFieldType> = ['day', 'month', 'year'];\n\n\t/**\n\t * A function used to override internal date validation logic, which takes three arguments (i.e day, month and year) and returns\n\t * an object of type `DateValidatorReturnType`\n\t *\n\t * This is optional. If no prop for `dateValidator` is passed, it will default to internal validation function to validate\n\t * the date input.\n\t */\n\t@Prop() dateValidator?: (day: string, month: string, year: string) => DateValidatorReturnType;\n\n\t/**\n\t * Emitted when an `input` event occurs within the component.\n\t */\n\t@Event() inputOnInput: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\n\n\t/**\n\t * Emitted when a `change` event occurs within the component.\n\t */\n\t@Event() inputOnChange: EventEmitter<{\n\t\tvalue: string;\n\t\tfieldType: 'day' | 'month' | 'year';\n\t}>;\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<'day' | 'month' | 'year'>;\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<'day' | 'month' | 'year'>;\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@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 * 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@Listen('blur', { capture: true })\n\thandleComponentBlur() {\n\t\tconst { day, month, year, minYear, maxYear, dateValidator, dateOptionsState } = this;\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\n\t\t// if user has not interacted with the component, skip validation\n\t\tif (!this.isDateTyped) {\n\t\t\treturn;\n\t\t}\n\t\tconst errorMessages = translations.dateInput.error[this.getLanguage()];\n\t\tconst { dayInvalid, monthInvalid, yearInvalid, errorMessage } = dateValidator\n\t\t\t? dateValidator(day, month, year)\n\t\t\t: getDateErrorMessage({\n\t\t\t\t\tdayValue: day,\n\t\t\t\t\tmonthValue: month,\n\t\t\t\t\tyearValue: year,\n\t\t\t\t\terrorMessages,\n\t\t\t\t\tminYear,\n\t\t\t\t\tmaxYear,\n\t\t\t\t\tdayVisible,\n\t\t\t\t\tmonthVisible,\n\t\t\t\t\tyearVisible,\n\t\t\t\t});\n\n\t\tthis.dayInvalid = dayInvalid;\n\t\tthis.monthInvalid = monthInvalid;\n\t\tthis.yearInvalid = yearInvalid;\n\t\tthis.errorMessage = errorMessage;\n\t}\n\n\t@State() private translations: Translations = translations;\n\t@State() private captionState: InputCaption;\n\n\t@State() private isDateTyped: boolean = false;\n\t@State() private dayInvalid: boolean = false;\n\t@State() private monthInvalid: boolean = false;\n\t@State() private yearInvalid: boolean = false;\n\t@State() private errorMessage: string | undefined;\n\n\t@State() private day: string = '';\n\t@State() private month: string = '';\n\t@State() private year: string = '';\n\n\t@State() private placeholderState: DateInputPlaceholder;\n\t@State() private dateOptionsState: Array<DateInputFieldType>;\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\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\tprivate processPlaceholder() {\n\t\tthis.parseOptions(this.placeholder);\n\t}\n\n\tprivate processDateOptions() {\n\t\tthis.parseOptions(this.dateOptions);\n\t}\n\n\tprivate parseOptions(options: any) {\n\t\tconst isString = typeof options === 'string';\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.placeholder) {\n\t\t\t\tthis.placeholderState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.dateOptions) {\n\t\t\t\tthis.dateOptionsState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-date-input>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\tprivate isInvalidDate = () => {\n\t\treturn this.dayInvalid || this.monthInvalid || this.yearInvalid;\n\t};\n\n\tprivate resetErrorState = () => {\n\t\tif (!this.isInvalidDate()) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.dayInvalid = false;\n\t\tthis.monthInvalid = false;\n\t\tthis.yearInvalid = false;\n\t\tthis.errorMessage = '';\n\t};\n\n\tprivate updateDateState = (value: string, inputFieldType: DateInputFieldType) => {\n\t\tswitch (inputFieldType) {\n\t\t\tcase 'day':\n\t\t\t\tthis.day = value;\n\t\t\t\tbreak;\n\t\t\tcase 'month':\n\t\t\t\tthis.month = value;\n\t\t\t\tbreak;\n\t\t\tcase 'year':\n\t\t\t\tthis.year = value;\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\tprivate handleDateUpdates = (value: string, fieldType: DateInputFieldType) => {\n\t\t// set boolean indicating user interaction with the component for validation\n\t\tif (!this.isDateTyped) {\n\t\t\tthis.isDateTyped = true;\n\t\t}\n\n\t\t// reset error state when user starts typing\n\t\tthis.resetErrorState();\n\n\t\t// update date state\n\t\tthis.updateDateState(value, fieldType);\n\n\t\t// TODO: verify are all the values numbers?\n\t\tif (this.year && this.month && this.day) {\n\t\t\tconst desiredDate = new Date(\n\t\t\t\tDate.UTC(parseInt(this.year), parseInt(this.month) - 1, parseInt(this.day), 0, 0, 0, 0),\n\t\t\t);\n\t\t\tthis.internals?.setFormValue?.(desiredDate.toISOString());\n\t\t}\n\t};\n\n\tprivate handleDateInput = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnInput.emit({ value, fieldType });\n\t};\n\n\tprivate handleDateChanged = (value: string, fieldType: DateInputFieldType) => {\n\t\tthis.handleDateUpdates(value, fieldType);\n\n\t\t// emit date change event\n\t\tthis.inputOnChange.emit({ value, fieldType });\n\n\t\t// emit change event\n\t\temitEvent(this.element, 'change', { value, fieldType });\n\t};\n\n\tprivate handleDateFocus = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnFocus.emit(fieldType);\n\t};\n\n\tprivate handleDateBlur = (fieldType: DateInputFieldType) => {\n\t\t// emit date field focus event\n\t\tthis.inputOnBlur.emit(fieldType);\n\t};\n\n\tprivate getLanguage(): Language {\n\t\treturn this.language ?? 'en';\n\t}\n\n\tprivate getCaption(): Caption | string {\n\t\tconst language = this.getLanguage();\n\t\tconst captionText = translations.dateInput.caption[language];\n\n\t\treturn this.caption ?? { captionText, captionType: 'default' };\n\t}\n\n\tprivate getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getHintTextId(): string {\n\t\treturn `date-input-hint-${this.getId()}`;\n\t}\n\n\tprivate getInputIds() {\n\t\tconst id = this.getId();\n\n\t\tconst dayId = `day-${id}`;\n\t\tconst monthId = `month-${id}`;\n\t\tconst yearId = `year-${id}`;\n\n\t\treturn { dayId, monthId, yearId };\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processPlaceholder();\n\t\tthis.processDateOptions();\n\n\t\tthis.updateCaptionState(this.getCaption());\n\t\tthis.elementId = this.elementId ?? uuid();\n\n\t\tthis.language = validateLanguage(this.language) as Language;\n\t}\n\n\trender() {\n\t\tconst { dateOptionsState, required, translations, hintText, placeholderState } = this;\n\t\tconst language = this.getLanguage();\n\t\tconst dateStrings = translations.dateInput;\n\t\tconst placeholderText = placeholderState ?? {};\n\t\tconst { dayVisible, monthVisible, yearVisible } = getVisibleDateFields(dateOptionsState);\n\t\tconst { dayId, monthId, yearId } = this.getInputIds();\n\t\tconst hintTextId = this.getHintTextId();\n\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t<fieldset role=\"group\" class=\"ontario-fieldset\">\n\t\t\t\t\t{this.captionState.getCaption()}\n\t\t\t\t\t{!!hintText && (\n\t\t\t\t\t\t<p id={hintTextId} class=\"ontario-hint\">\n\t\t\t\t\t\t\t{hintText}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={this.isInvalidDate()} />\n\t\t\t\t\t<div class=\"ontario-date__group\">\n\t\t\t\t\t\t{yearVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={yearId}\n\t\t\t\t\t\t\t\ttype=\"year\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.year.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.year.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.yearInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.year}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{monthVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={monthId}\n\t\t\t\t\t\t\t\ttype=\"month\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.month.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.month.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.monthInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.month}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{dayVisible && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tid={dayId}\n\t\t\t\t\t\t\t\ttype=\"day\"\n\t\t\t\t\t\t\t\tlabel={dateStrings.day.label[language]}\n\t\t\t\t\t\t\t\taccessibilityLabel={dateStrings.day.accessibility[language]}\n\t\t\t\t\t\t\t\trequired={!!required}\n\t\t\t\t\t\t\t\terror={this.dayInvalid}\n\t\t\t\t\t\t\t\tplaceholder={placeholderText.day}\n\t\t\t\t\t\t\t\tonInput={this.handleDateInput}\n\t\t\t\t\t\t\t\tonChange={this.handleDateChanged}\n\t\t\t\t\t\t\t\tonBlur={this.handleDateBlur}\n\t\t\t\t\t\t\t\tonFocus={this.handleDateFocus}\n\t\t\t\t\t\t\t\tariaDescribedBy={hintTextId}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","import { getAssetPath } from '@stencil/core';\n\n/**\n * Generate the full path to an image asset based on the base asset path.\n *\n * - If `assetBasePath` is provided, it is used as the base path.\n * - If not, attempts to use Stencil's `getAssetPath` (for Stencil/Angular builds).\n * - If that fails (e.g., in React), falls back to `/assets/`, assuming assets are in the public folder.\n *\n * @param imageName - The name of the image file.\n * @param assetBasePath - Optional base path for assets.\n * @returns The full image path as a string.\n */\nexport function getImageAssetSrcPath(imageName: string, assetBasePath?: string): string {\n\tif (assetBasePath) {\n\t\treturn `${assetBasePath.replace(/\\/$/, '')}/${imageName}`;\n\t}\n\n\ttry {\n\t\treturn getAssetPath(`./assets/${imageName}`);\n\t} catch (error) {\n\t\tconsole.warn(`getAssetPath failed for ${imageName}, falling back to /assets/:`, error);\n\t\treturn `/assets/${imageName}`;\n\t}\n}\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/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-dropdown-border-width: 0.125rem;\n\n.ontario-dropdown {\n\tbackground-color: colours.$ontario-colour-white;\n\tbackground-position: right spacing.$spacing-2 center;\n\tbackground-repeat: no-repeat;\n\tbackground-size: spacing.$spacing-6;\n\tpadding-right: (spacing.$spacing-4 * 2.25);\n\tcursor: pointer;\n\n\t&.ontario-dropdown-hint-expander--true {\n\t\tmargin-bottom: spacing.$spacing-4;\n\t}\n}\n\n/* These styles are to fix differences in default styling for dropdowns in IE */\n.ontario-dropdown::-ms-expand {\n\tdisplay: none;\n}\n\n.ontario-dropdown option {\n\tfont-weight: normal;\n}\n\n.ontario-dropdown--error {\n\tselect {\n\t\tborder: $ontario-dropdown-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, State, Element, h, Prop, Event, Listen, Watch, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { DropdownOption } from './dropdown-option.interface';\nimport { Dropdown } from './dropdown.interface';\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { hasMultipleTrueValues } from '../../utils/helper/utils';\nimport { getImageAssetSrcPath } from '../../utils/helper/assets';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport { InputFocusBlurEvent, EventType, InputInteractionEvent } from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-dropdown-list',\n\tstyleUrl: 'ontario-dropdown-list.scss',\n\tshadow: true,\n\tformAssociated: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioDropdownList implements Dropdown {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the dropdown list label.\n\t *\n\t * @example\n\t * <ontario-dropdown-list\n\t *   name=\"ontario-dropdown-list\"\n\t *   caption='{\n\t *     \"captionText\": \"Label\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   ...>\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name for the dropdown list. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The ID for the dropdown list.\n\t * If no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/**\n\t * The options for dropdown list.\n\t *\n\t * Each option will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t *\n\t * In the example below, the options are being passed in as a string and there are three dropdown options displayed.\n\t *\n\t * @example\n\t * <ontario-dropdown-list\n\t *   caption='{\n\t *     \"captionText\": \"Label\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   name=\"ontario-dropdown-list\"\n\t *   options='[\n\t *     {\n\t *       \"value\": \"dropdown-option-1\",\n\t *       \"label\": \"Option 1\",\n\t *       \"selected\": \"true\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-2\",\n\t *       \"label\": \"Option 2\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-3\",\n\t *       \"label\": \"Option 3\"\n\t *     }\n\t *   ]'\n\t * >\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() options: string | DropdownOption[];\n\n\t/**\n\t * This is used to determine whether the dropdown list is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * This prop is used to determine whether or not the initial option displayed is empty.\n\t * If set to `true`, it will render the default “select” text.\n\t * If set to a string, it will render the string value.\n\t *\n\t * @example\n\t * <ontario-dropdown-list is-empty-start-option=\"true\"></ontario-dropdown-list>\n\t *\n\t * or\n\t *\n\t * <ontario-dropdown-list is-empty-start-option=\"Please select\"></ontario-dropdown-list>\n\t */\n\t@Prop() isEmptyStartOption?: boolean | string = false;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the dropdown list.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the dropdown list component.\n\t * This is passed in as an object with key-value pairs.\n\t *\n\t * This is optional.\n\t *\n\t * @example\n\t * <ontario-dropdown-list\n\t *   caption='{\n\t *     \"caption\": \"What province do you live in?\",\n\t *     \"captionType\": \"heading\",\n\t *   }\n\t *   name=\"ontario-dropdown-list\"\n\t *   options='[\n\t *     {\n\t *       \"value\": \"dropdown-option-1\",\n\t *       \"label\": \"Option 1\",\n\t *       \"selected\": \"true\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-2\",\n\t *       \"label\": \"Option 2\"\n\t *     },\n\t *     {\n\t *       \"value\": \"dropdown-option-3\",\n\t *       \"label\": \"Option 3\"\n\t *     }\n\t *   ]'\n\t *   hint-expander='{\n\t *    \"hint\": \"Hint expander for the dropdown list\",\n\t *    \"content\": \"Example hint expander content for the dropdown list.\"\n\t *   }'\n\t * >\n\t * </ontario-dropdown-list>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the dropdown onChange event.\n\t */\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the dropdown onBlur event.\n\t */\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used to add a custom function to the dropdown onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * Instantiate an InputCaption object for internal logic use\n\t */\n\t@State() private captionState: InputCaption;\n\n\t/**\n\t * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: DropdownOption[];\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * The hint expander options are re-assigned to the internalHintExpander array.\n\t */\n\t@State() private internalHintExpander: HintExpander;\n\n\t@State() translations: any = translations;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs when a dropdown list has been changed.\n\t */\n\t@Event() dropdownOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a dropdown list has lost focus.\n\t */\n\t@Event() dropdownOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a dropdown list has gained focus.\n\t */\n\t@Event() dropdownOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ 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 */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/*\n\t * Watch for changes in the `name` prop for validation purposes.\n\t *\n\t * Validate the `name` and make sure the `name` prop has a value.\n\t * Log a warning if user doesn't input a value for the `name`.\n\t */\n\t@Watch('name')\n\tvalidateName(newValue: string) {\n\t\tif (validatePropExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' name ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `options` prop for validation purposes.\n\t *\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t */\n\t@Watch('options')\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\n\t\t// Check selected status of options and set the selectedValue\n\t\tthis.validateSelectedOption(this.internalOptions);\n\t}\n\n\t/**\n\t * Watch for changes to the `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintText` prop.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t */\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/**\n\t * Watch for changes to the `hintExpander` prop.\n\t *\n\t * If a `hintExpander` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalHintExpander` state.\n\t */\n\t@Watch('hintExpander')\n\tprivate parseHintExpander() {\n\t\tconst hintExpander = this.hintExpander;\n\t\tif (hintExpander) {\n\t\t\tif (typeof hintExpander === 'string') this.internalHintExpander = JSON.parse(hintExpander);\n\t\t\telse this.internalHintExpander = hintExpander;\n\t\t}\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle dropdown list events and the information pertaining to the dropdown list to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLSelectElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.dropdownOnChange,\n\t\t\tthis.dropdownOnFocus,\n\t\t\tthis.dropdownOnBlur,\n\t\t\tundefined,\n\t\t\t'dropdown',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This function will set a selected key to `false` for each dropdown if no selected value is passed.\n\t *\n\t * It will also pass a warning to the user if multiple `true` selected values are passed.\n\t *\n\t * @param options\n\t * @returns options\n\t */\n\tprivate validateSelectedOption(options: DropdownOption[]) {\n\t\tconst selected = 'selected';\n\n\t\toptions.forEach((singleOption) => {\n\t\t\t// if no selected key is passed, set a default key to false\n\t\t\tif (!singleOption.hasOwnProperty(selected)) {\n\t\t\t\tsingleOption.selected = false;\n\t\t\t}\n\t\t});\n\n\t\tif (hasMultipleTrueValues(options, selected)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' There are duplicate truthy `selected` values ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-dropdown-list> ')\n\t\t\t\t.addRegularText('options. Please update options so only one truthy `selected` value exists.')\n\t\t\t\t.printMessage();\n\t\t}\n\n\t\treturn options;\n\t}\n\n\tprivate getDropdownArrow() {\n\t\treturn {\n\t\t\tbackgroundImage: `url(${getImageAssetSrcPath('ontario-material-dropdown-arrow-48px.svg')})`,\n\t\t};\n\t}\n\n\tprivate getClass(): string {\n\t\treturn this.hintExpander\n\t\t\t? `ontario-input ontario-dropdown ontario-dropdown-hint-expander--true`\n\t\t\t: `ontario-input ontario-dropdown`;\n\t}\n\n\t/**\n\t * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst error = !!this.errorMessage;\n\t\treturn (\n\t\t\t<div class={`ontario-form-group ${error ? 'ontario-dropdown--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<select\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tstyle={this.getDropdownArrow()}\n\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\trequired={!!this.required}\n\t\t\t\t>\n\t\t\t\t\t{this.isEmptyStartOption &&\n\t\t\t\t\t\t(this.isEmptyStartOption === true || this.isEmptyStartOption === 'true' ? (\n\t\t\t\t\t\t\t<option>{this.translations.dropdownList.select[`${this.language}`]}</option>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<option>{this.isEmptyStartOption}</option>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t{this.internalOptions?.map((dropdown) => (\n\t\t\t\t\t\t<option value={dropdown.value} selected={dropdown.selected}>\n\t\t\t\t\t\t\t{dropdown.label}\n\t\t\t\t\t\t</option>\n\t\t\t\t\t)) ?? ''}\n\t\t\t\t</select>\n\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n","import { Component, h, Prop, Watch } from '@stencil/core';\n\nimport { Fieldset } from './ontario-fieldset.interface';\n\nimport { CaptionType, CaptionTypes } from '../../utils/common/input-caption/input-caption.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validatePropExists, validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-fieldset',\n\tstyleUrl: 'ontario-fieldset.scss',\n\tshadow: true,\n})\nexport class OntarioFieldset implements Fieldset {\n\t/**\n\t * The text value used for the legend of the fieldset.\n\t */\n\t@Prop({ mutable: true }) legend: string;\n\n\t/**\n\t * The size of the fieldset legend. If no prop is passed, it will be `default`.\n\t */\n\t@Prop({ mutable: true }) legendSize: CaptionType = 'default';\n\n\t/**\n\t * Watch for changes to the legendSize prop.\n\t * This is for validation purposes to make sure the legendSize matches one of the CaptionTypes.\n\t */\n\t@Watch('legendSize')\n\tvalidateLegendSize() {\n\t\tconst isValid = validateValueAgainstArray(this.legendSize, CaptionTypes);\n\n\t\tif (isValid) {\n\t\t\treturn this.legendSize;\n\t\t} else {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` legendSize ${this.legendSize} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('is not a valid type. A default size will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn 'default';\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `legend` prop for validation purposes.\n\t */\n\t@Watch('legend')\n\tvalidateLegend() {\n\t\tthis.validateLegendText(this.legend);\n\t}\n\n\t/**\n\t * Print the legend warning message\n\t */\n\tvalidateLegendText(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(' legend ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-fieldset> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\tcomponentWillLoad() {\n\t\tthis.validateLegend();\n\t\tthis.validateLegendSize();\n\t}\n\n\tprivate getClass() {\n\t\tswitch (this.legendSize) {\n\t\t\tcase 'large':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--large`;\n\t\t\tcase 'heading':\n\t\t\t\treturn `ontario-fieldset__legend ontario-fieldset__legend--heading`;\n\t\t\tcase 'default':\n\t\t\tdefault:\n\t\t\t\treturn `ontario-fieldset__legend`;\n\t\t}\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-form-group\">\n\t\t\t\t<fieldset class=\"ontario-fieldset\">\n\t\t\t\t\t<legend class={this.getClass()}>\n\t\t\t\t\t\t{this.legendSize === 'heading' ? <h1>{this.legend}</h1> : this.legend}\n\t\t\t\t\t</legend>\n\t\t\t\t\t<slot />\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","import { FunctionalComponent, h } from '@stencil/core';\n\nconst ICON_WIDTH = 32;\n\nexport type FooterSocialLinksProps = {\n\tfacebook?: string;\n\ttwitter?: string;\n\tinstagram?: string;\n\tyoutube?: string;\n};\n\nexport const FooterSocialLinks: FunctionalComponent<FooterSocialLinksProps> = ({\n\tfacebook,\n\ttwitter,\n\tinstagram,\n\tyoutube,\n}) => {\n\treturn (\n\t\t<ul class=\"ontario-footer__links-container ontario-footer__links-container--social\">\n\t\t\t{facebook && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={facebook} aria-label=\"Facebook\">\n\t\t\t\t\t\t<ontario-icon-facebook colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{twitter && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={twitter} aria-label=\"Twitter\">\n\t\t\t\t\t\t<ontario-icon-twitter colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{instagram && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={instagram} aria-label=\"Instagram\">\n\t\t\t\t\t\t<ontario-icon-instagram colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t\t{youtube && (\n\t\t\t\t<li>\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={youtube} aria-label=\"Youtube\">\n\t\t\t\t\t\t<ontario-icon-youtube colour=\"white\" icon-width={ICON_WIDTH} />\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t)}\n\t\t</ul>\n\t);\n};\n","import { h, FunctionalComponent } from '@stencil/core';\nimport { SimpleFooterLinks } from '../ontario-footer-interface';\n\nconst enDash = '\\u2013';\n\ntype SimpleFooterProps = SimpleFooterLinks & {\n\tclassName?: string;\n};\n\nexport const SimpleFooter: FunctionalComponent<SimpleFooterProps> = ({\n\taccessibilityLink,\n\tprivacyLink,\n\tcontactLink,\n\tprinterLink,\n\tclassName,\n\ttermsOfUseLink,\n}) => {\n\treturn (\n\t\t<div class={`ontario-row ${className ?? ''}`}>\n\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t<ul class=\"ontario-footer__links-container ontario-footer__links-container--inline\">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={accessibilityLink.href}>\n\t\t\t\t\t\t\t{accessibilityLink.text}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={privacyLink.href}>\n\t\t\t\t\t\t\t{privacyLink.text}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t{contactLink && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={contactLink?.href}>\n\t\t\t\t\t\t\t\t{contactLink?.text}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t\t{termsOfUseLink && (\n\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t<a class=\"ontario-footer__link\" href={termsOfUseLink?.href}>\n\t\t\t\t\t\t\t\t{termsOfUseLink?.text}\n\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t)}\n\t\t\t\t</ul>\n\t\t\t\t<div class=\"ontario-footer__copyright\">\n\t\t\t\t\t<a class=\"ontario-footer__link\" href={printerLink?.href}>\n\t\t\t\t\t\t&copy; {printerLink?.text}{' '}\n\t\t\t\t\t\t<span class=\"ontario-nbsp\">\n\t\t\t\t\t\t\t2012{enDash}\n\t\t\t\t\t\t\t{String(new Date().getFullYear()).slice(-2)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n","import { FunctionalComponent, h, Fragment } from '@stencil/core';\nimport { FooterColumnContent } from '../ontario-footer-interface';\n\nexport type FooterColumnContentProps = {\n\tcontent: FooterColumnContent;\n};\n\nexport const ColumnContent: FunctionalComponent<FooterColumnContentProps> = ({ content }) => {\n\tconst { heading, headingLevel: Heading = 'h3', text, html, list, type = 'text' } = content;\n\n\treturn (\n\t\t<Fragment>\n\t\t\t{heading && <Heading class=\"ontario-h5\">{heading}</Heading>}\n\t\t\t{type === 'text' && <p>{text}</p>}\n\t\t\t{type === 'html' && <div class=\"ontario-footer__paragraph\" innerHTML={html as string} />}\n\t\t\t{type === 'list' && !!list?.length && (\n\t\t\t\t<ul>\n\t\t\t\t\t{list.map((item: string) => (\n\t\t\t\t\t\t<li class=\"ontario-footer__list_item\" innerHTML={item} />\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t)}\n\t\t</Fragment>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { FooterColumnData } from '../ontario-footer-interface';\nimport { ColumnContent } from './footer-column-content';\nimport { FooterSocialLinks, FooterSocialLinksProps } from './footer-social-links';\n\nexport type FooterColumnProps = {\n\tdata: FooterColumnData;\n\tsocialLinks?: FooterSocialLinksProps;\n\tisThreeColLayout?: boolean;\n\tisFullWidthInMediumLayout?: boolean;\n};\n\nexport const FooterColumn: FunctionalComponent<FooterColumnProps> = ({\n\tdata,\n\tsocialLinks,\n\tisThreeColLayout = false,\n\tisFullWidthInMediumLayout = false,\n}) => {\n\tconst { title, content, button, headingLevel: Heading = 'h2' } = data;\n\tconst threeColumnLayoutClasses = isThreeColLayout ? 'ontario-large-4 ontario-expanded-footer__one-third-block' : '';\n\tconst mediumLayoutClasses = isFullWidthInMediumLayout ? 'ontario-medium-12' : 'ontario-medium-6';\n\n\treturn (\n\t\t<div class={`ontario-columns ontario-small-12 ${mediumLayoutClasses} ${threeColumnLayoutClasses}`}>\n\t\t\t<Heading class=\"ontario-h4\">{title}</Heading>\n\t\t\t{content.map((item) => (\n\t\t\t\t<ColumnContent content={item} />\n\t\t\t))}\n\t\t\t{button && (\n\t\t\t\t<a class=\"ontario-footer__button ontario-button ontario-margin-bottom-0-!\" href={button.link}>\n\t\t\t\t\t{button.text}\n\t\t\t\t</a>\n\t\t\t)}\n\t\t\t{socialLinks && <FooterSocialLinks {...socialLinks} />}\n\t\t</div>\n\t);\n};\n","import { FunctionalComponent, h } from '@stencil/core';\nimport { SimpleFooter } from './simple-footer';\nimport { SimpleFooterLinks } from '../ontario-footer-interface';\n\nexport type ExpandedFooterWrapperProps = {\n\tfooterLinks: SimpleFooterLinks;\n\ttopMargin: boolean;\n\tbackgroundImagePath: string;\n};\n\nexport const ExpandedFooterWrapper: FunctionalComponent<ExpandedFooterWrapperProps> = (props, children) => {\n\tconst { topMargin, footerLinks, backgroundImagePath } = props;\n\tconst style = { '--imagePath': backgroundImagePath };\n\tconst marginClass = !topMargin ? 'ontario-margin-top-0-!' : '';\n\n\treturn (\n\t\t<footer class={`ontario-footer ontario-footer--expanded ${marginClass}`} style={style}>\n\t\t\t<div class=\"ontario-footer__expanded-top-section\">\n\t\t\t\t<div class=\"ontario-row\">{children}</div>\n\t\t\t</div>\n\t\t\t<SimpleFooter {...footerLinks} className=\"ontario-footer__expanded-bottom-section\" />\n\t\t</footer>\n\t);\n};\n","import { TwoColumnOptions, ThreeColumnOptions } from '../ontario-footer-interface';\n\nexport const isInvalidTwoColumnOptions = (options: TwoColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content\n\t);\n};\n\nexport const isInvalidThreeColumnOptions = (options: ThreeColumnOptions): boolean => {\n\treturn (\n\t\t!options ||\n\t\t!options.column1?.title ||\n\t\t!options.column1?.content ||\n\t\t!options.column2?.title ||\n\t\t!options.column2?.content ||\n\t\t!options.column3?.title ||\n\t\t!options.column3?.content\n\t);\n};\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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 '../../styles/grid.scss';\n@use '../../styles/common.scss';\n\n$ontario-icon-size--social-large: 36px;\n$ontario-icon-size--social-small: 32px;\n\n.ontario-footer {\n\tcolor: colours.$ontario-colour-white;\n\tmargin-top: spacing.$spacing-10;\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n}\n\n.ontario-footer .ontario-columns {\n\t*:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container {\n\tlist-style: none;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-footer__links-container--inline {\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex-wrap: wrap;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tflex-direction: row;\n\t}\n}\n\n/*************************************\n    Expanded footer specific styles\n**************************************/\n\n.ontario-footer__links-container--two-column-list {\n\tcolumn-count: 1;\n\tdisplay: block;\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tcolumn-count: 2;\n\n\t\t.ontario-footer__link {\n\t\t\tpadding: spacing.$spacing-0;\n\t\t\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__links-container li {\n\tpadding: spacing.$spacing-1 spacing.$spacing-0;\n}\n\n.ontario-footer__link {\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: inline-block;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:visited,\n\t&:active,\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tpadding: spacing.$spacing-0;\n\t\tmargin: spacing.$spacing-0 spacing.$spacing-8 spacing.$spacing-4 spacing.$spacing-0;\n\t}\n}\n\n.ontario-footer__copyright a {\n\tmargin: spacing.$spacing-0;\n}\n\n.ontario-footer__links-container--social {\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: wrap;\n}\n\n.ontario-footer__links-container--social .ontario-footer__link {\n\tbackground: transparent;\n\tborder-radius: 45%;\n\tmargin: spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n\toutline: none;\n\n\theight: (spacing.$spacing-8 + spacing.$spacing-2);\n\twidth: (spacing.$spacing-8 + spacing.$spacing-2);\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\t&:hover,\n\t&:focus {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 100);\n\n\t\t.ontario-icon {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\theight: spacing.$spacing-8;\n\t\twidth: spacing.$spacing-8;\n\t}\n}\n\n.ontario-footer__links-container--social .ontario-footer__link .ontario-icon {\n\tfill: colours.$ontario-colour-white;\n\twidth: $ontario-icon-size--social-large;\n\theight: $ontario-icon-size--social-large;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-icon-size--social-small;\n\t\theight: $ontario-icon-size--social-small;\n\t}\n}\n\n.ontario-footer__paragraph {\n\tmax-width: globalVariables.$standard-width;\n\twidth: globalVariables.$full-width;\n\tmargin-bottom: spacing.$spacing-5;\n}\n\n.ontario-footer p,\n.ontario-footer__paragraph,\n.ontario-footer__list_item {\n\ta {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\n\t\t&:visited {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t\t}\n\n\t\t&:focus,\n\t\t&:hover {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n}\n\n.ontario-button.ontario-footer__button {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder: 2px solid colours.$ontario-colour-white;\n\tborder-color: colours.$ontario-colour-white;\n\tcolor: colours.$ontario-colour-white;\n\tmargin-bottom: spacing.$spacing-6;\n\tborder-radius: spacing.$spacing-1;\n\tbox-sizing: border-box;\n\tbox-shadow: none;\n\tdisplay: inline-block;\n\tfont-size: 1.125rem;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tline-height: math.div(14, 9);\n\tmargin: 0 (1rem + 0.75rem) 1.5rem 0;\n\tmin-width: 10rem;\n\tpadding: 0.625rem 1.5rem;\n\ttext-align: center;\n\ttext-decoration: none;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 70);\n\t}\n\n\t&:focus,\n\t&:active {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 60);\n\t\tbox-shadow: 0 0 0 spacing.$spacing-1 colours.$ontario-colour-focus;\n\t\toutline: spacing.$spacing-1 solid transparent;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-footer__button + .ontario-footer__links-container {\n\tmargin-top: spacing.$spacing-5;\n}\n\n/* Supergraphic background */\n.ontario-footer--default,\n.ontario-footer__expanded-top-section {\n\tposition: relative;\n\n\t&:before {\n\t\tbackground-color: darken(colours.$ontario-colour-white, 80);\n\t\tbackground-repeat: no-repeat;\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: globalVariables.$full-width;\n\t\theight: 100%;\n\t}\n}\n\n.ontario-footer--default:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n.ontario-footer__expanded-top-section:before {\n\tbackground-image: var(--imagePath, url(''));\n}\n\n//////////////////////////\n//  Footer variations  //\n/////////////////////////\n\n/* Default footer */\n.ontario-footer--default {\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n\n\t&:before {\n\t\tbackground-size: 112.5rem;\n\t\tbackground-position: calc(50vw - 73.5rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 180rem;\n\t\t\tbackground-position: calc(50vw - 120rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 275rem;\n\t\t\tbackground-position: calc(50vw - 187rem) -160rem;\n\t\t}\n\t}\n}\n\n/* expanded footer */\n.ontario-footer--expanded {\n\tpadding-top: spacing.$spacing-0;\n\tbackground-color: colours.$ontario-colour-black;\n\tborder-bottom: spacing.$spacing-1 solid colours.$ontario-greyscale-70;\n}\n\n.ontario-footer__expanded-top-section {\n\tbackground-color: darken(colours.$ontario-colour-white, 85);\n\tpadding: spacing.$spacing-9 spacing.$spacing-0;\n\n\t&:before {\n\t\tbackground-size: 165rem;\n\t\tbackground-position: calc(50vw - 125rem) -64rem;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tbackground-size: 250rem;\n\t\t\tbackground-position: calc(50vw - 195rem) -106rem;\n\t\t}\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tbackground-size: 305rem;\n\t\t\tbackground-position: calc(50vw - 222rem) -160rem;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-top-section .ontario-footer__link {\n\ttext-decoration: underline;\n\n\t&:hover,\n\t&:focus {\n\t\ttext-decoration: none;\n\t}\n\n\t&:active {\n\t\tcolor: darken(colours.$ontario-colour-white, 10);\n\t}\n}\n\n.ontario-footer__expanded-top-section ul {\n\tmargin-bottom: spacing.$spacing-0;\n}\n\n.ontario-expanded-footer__one-third-block {\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:first-of-type,\n\t&:nth-child(2) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-8;\n\t\t}\n\n\t\t&:nth-child(2) {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:first-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-footer__expanded-bottom-section {\n\tbackground-color: colours.$ontario-colour-black;\n\tpadding-top: spacing.$spacing-9;\n}\n","import { Component, Prop, h, State, Watch, Listen } from '@stencil/core';\n\nimport {\n\tFooterLinks,\n\tOntarioFooterType,\n\tThreeColumnOptions,\n\tTwoColumnOptions,\n\tSimpleFooterLinks,\n} from './ontario-footer-interface';\nimport { ExpandedFooterWrapper, FooterColumn, FooterSocialLinksProps, SimpleFooter } from './components';\n\nimport { isInvalidTwoColumnOptions, isInvalidThreeColumnOptions } from './utils';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { getImageAssetSrcPath } from '../../utils/helper/assets';\n\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-footer',\n\tstyleUrl: 'ontario-footer.scss',\n\tshadow: true,\n\tassetsDirs: ['assets'],\n})\nexport class OntarioFooter {\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language: Language;\n\n\t/**\n\t * The type of footer to be rendered. If no prop is provided, it will default to the 'default' type.\n\t */\n\t@Prop() type: OntarioFooterType = 'default';\n\n\t/**\n\t * A prop that stores the required links for all footers.\n\t * Available options are 'accessibilityLink', 'privacyLink', 'contactLink','termsOfUseLink' and 'printerLink'\n\t */\n\t@Prop() footerLinks: FooterLinks | string;\n\n\t/**\n\t * Social media links to render in the footer.\n\t * Available options are 'facebook', 'twitter', 'instagram' and 'youtube'\n\t */\n\t@Prop() socialLinks: FooterSocialLinksProps | string;\n\n\t/**\n\t * Stores the titles and content for the expanded two column footer.\n\t */\n\t@Prop() twoColumnOptions?: TwoColumnOptions | string;\n\n\t/**\n\t * Stores the titles and content for the expanded three column footer.\n\t */\n\t@Prop() threeColumnOptions?: ThreeColumnOptions | string;\n\n\t/**\n\t * Top margin for the footer. By default, this prop is set to `true`, which adds a margin top value of `5rem`.\n\t * If set to `false`, the top margin value will be set to zero.\n\t */\n\t@Prop() topMargin: boolean = true;\n\n\t/**\n\t * The base path to an assets folder containing the Design System assets\n\t */\n\t@Prop() assetBasePath: string;\n\n\t@State() translations: any = translations;\n\n\t@State() private footerLinksState: FooterLinks;\n\n\t@State() private socialLinksState: FooterSocialLinksProps;\n\n\t@State() private twoColumnState: TwoColumnOptions;\n\n\t@State() private threeColumnState: ThreeColumnOptions;\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the test language toggler when it is\n\t * 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@Watch('footerLinks')\n\tprivate processFooterLinks() {\n\t\tthis.parseOptions(this.footerLinks);\n\t}\n\n\t@Watch('socialLinks')\n\tprivate processSocialLinks() {\n\t\tthis.parseOptions(this.socialLinks);\n\t}\n\n\t@Watch('twoColumnOptions')\n\tprivate processTwoColumnOptions() {\n\t\tthis.twoColumnOptions && this.parseOptions(this.twoColumnOptions);\n\t\tthis.verifyTwoColumnOptions();\n\t}\n\n\t@Watch('threeColumnOptions')\n\tprivate processThreeColumnOptions() {\n\t\tthis.threeColumnOptions && this.parseOptions(this.threeColumnOptions);\n\t\tthis.verifyThreeColumnOptions();\n\t}\n\n\tprivate isTwoColumnLayout = (): boolean => this.type === 'twoColumn';\n\tprivate isThreeColumnLayout = (): boolean => this.type === 'threeColumn';\n\tprivate isExpandedLayout = (): boolean => this.isTwoColumnLayout() || this.isThreeColumnLayout();\n\n\tprivate verifyTwoColumnOptions() {\n\t\tif (this.isTwoColumnLayout() && isInvalidTwoColumnOptions(this.twoColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' twoColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate verifyThreeColumnOptions() {\n\t\tif (this.isThreeColumnLayout() && isInvalidThreeColumnOptions(this.threeColumnState)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' threeColumnOptions ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-footer> ')\n\t\t\t\t.addRegularText('were not fully set. Please review your values and ensure all options are set.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate parseOptions(optionType: any) {\n\t\tconst options = optionType;\n\t\tconst isString = typeof options === 'string';\n\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.footerLinks) {\n\t\t\t\tthis.footerLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.socialLinks) {\n\t\t\t\tthis.socialLinksState = isString ? JSON.parse(options) : options;\n\t\t\t} else if (options === this.twoColumnOptions) {\n\t\t\t\tthis.twoColumnState = isString ? JSON.parse(options) : options;\n\t\t\t} else {\n\t\t\t\tthis.threeColumnState = isString ? JSON.parse(options) : options;\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-footer>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\t/**\n\t * Generate CSS url to the background image\n\t * @returns path to the background image\n\t */\n\tprivate getBackgroundImagePath(): string {\n\t\tconst supergraphicLogoFile = this.isExpandedLayout()\n\t\t\t? 'footer-expanded-supergraphic-logo.svg'\n\t\t\t: 'footer-default-supergraphic-logo.svg';\n\n\t\treturn `url(${getImageAssetSrcPath(supergraphicLogoFile, this.assetBasePath)})`;\n\t}\n\n\tprivate getFooterClasses() {\n\t\tlet classes = 'ontario-footer ontario-footer--default';\n\n\t\tif (!this.topMargin) {\n\t\t\tclasses = `${classes}  ontario-margin-top-0-!`;\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tprivate getFooterLinks(): SimpleFooterLinks {\n\t\tconst { language, translations, footerLinksState } = this;\n\t\tconst { accessibilityLink, privacyLink, contactLink, termsOfUseLink, printerLink } = footerLinksState ?? {};\n\n\t\tconst links: SimpleFooterLinks = {\n\t\t\taccessibilityLink: {\n\t\t\t\thref: accessibilityLink?.href ?? translations.accessibilityLink.link[language],\n\t\t\t\ttext: accessibilityLink?.text ?? translations.accessibilityLink.text[language],\n\t\t\t},\n\t\t\tprivacyLink: {\n\t\t\t\thref: privacyLink?.href ?? translations.privacyLink.link[language],\n\t\t\t\ttext: privacyLink?.text ?? translations.privacyLink.text[language],\n\t\t\t},\n\t\t\tprinterLink: {\n\t\t\t\thref: printerLink?.href ?? translations.printerLink.link[language],\n\t\t\t\ttext: printerLink?.text ?? translations.printerLink.text[language],\n\t\t\t},\n\t\t};\n\n\t\tif (contactLink) {\n\t\t\tlinks.contactLink = {\n\t\t\t\thref: contactLink.href,\n\t\t\t\ttext: contactLink.text ?? translations.contactUs[language],\n\t\t\t};\n\t\t}\n\n\t\tif (termsOfUseLink) {\n\t\t\tlinks.termsOfUseLink = {\n\t\t\t\thref: termsOfUseLink.href,\n\t\t\t\ttext: termsOfUseLink.text ?? translations.termsOfUse[language],\n\t\t\t};\n\t\t}\n\n\t\treturn links;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processFooterLinks();\n\t\tthis.processSocialLinks();\n\t\tthis.processTwoColumnOptions();\n\t\tthis.processThreeColumnOptions();\n\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\tconst { socialLinksState, twoColumnState, threeColumnState, topMargin } = this;\n\t\tconst footerLinks = this.getFooterLinks();\n\n\t\tif (this.isTwoColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={twoColumnState.column1} />\n\t\t\t\t\t<FooterColumn data={twoColumnState.column2} socialLinks={socialLinksState} />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\tif (this.isThreeColumnLayout()) {\n\t\t\treturn (\n\t\t\t\t<ExpandedFooterWrapper\n\t\t\t\t\tfooterLinks={footerLinks}\n\t\t\t\t\ttopMargin={topMargin}\n\t\t\t\t\tbackgroundImagePath={this.getBackgroundImagePath()}\n\t\t\t\t>\n\t\t\t\t\t<FooterColumn data={threeColumnState.column1} isThreeColLayout isFullWidthInMediumLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column2} isThreeColLayout />\n\t\t\t\t\t<FooterColumn data={threeColumnState.column3} socialLinks={socialLinksState} isThreeColLayout />\n\t\t\t\t</ExpandedFooterWrapper>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<footer class={this.getFooterClasses()} style={{ '--imagePath': this.getBackgroundImagePath() }}>\n\t\t\t\t<SimpleFooter {...footerLinks} />\n\t\t\t</footer>\n\t\t);\n\t}\n}\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/functions/global.functions' as globalFunctions;\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/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\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/5-layout/_grid.layout.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n$ontario-search-padding: 7.2rem;\n$ontario-search-padding--mobile: 6.4rem;\n\n$ontario-header-logo-width: 180px;\n$ontario-header-logo-width--mobile: 45px;\n\n$ontario-header-custom-breakpoint: 39.9375em;\n\n$ontario-header-menu-button-icon--margin-right: 6px;\n\n$ontario-navigation-container-min-width: 290px;\n\n:host {\n\t--header-search-reset: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n}\n\n.ontario-header__container {\n\tposition: relative;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: zIndex.$ontario-z-index-above-low;\n\t}\n}\n\n.ontario-icon-container {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.ontario-icon-container-reset {\n\tdisplay: flex;\n\talign-items: center;\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-subheader__menu a {\n\tborder-radius: globalVariables.$global-radius;\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: inline;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-size: globalFunctions.px-to-rem(18);\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\theight: globalVariables.$standard-input-height;\n\tline-height: globalFunctions.px-to-rem(23);\n\tpadding: spacing.$spacing-3 spacing.$spacing-4;\n\ttext-decoration: none;\n\twhite-space: nowrap;\n\n\t&.ontario-link--active {\n\t\tborder-radius: 4px 4px 0 0;\n\t\tborder-bottom: 4px solid colours.$ontario-colour-white;\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n\n\t&:focus {\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-navigation {\n\tposition: absolute;\n\twidth: 100%;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tposition: relative;\n\t\tmax-width: 72rem;\n\t\twidth: auto;\n\t\tmargin: spacing.$spacing-0 auto;\n\t}\n}\n\n.nav-ul-closed {\n\tbackground: white;\n\tposition: absolute;\n\ttransform: translateY(-100%);\n\ttransition:\n\t\ttransform 0.3s ease-in-out,\n\t\tvisibility 0.1s ease;\n\twidth: 100%;\n\tvisibility: hidden;\n\tz-index: zIndex.$ontario-z-index-above-high;\n}\n\n.nav-ul-opened {\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\t}\n}\n\n.ontario-navigation ul {\n\tlist-style: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tborder-bottom: none;\n\t}\n}\n\n.ontario-navigation li {\n\tborder-top: 1px solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-navigation a {\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: fonts.$ontario-font-open-sans;\n\ttext-decoration: none;\n\tpadding: calc(spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t\tbackground-color: darken(colours.$ontario-greyscale-5, 5);\n\t}\n\n\t&:active {\n\t\ttext-decoration: underline;\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;\n\t}\n\n\t&.ontario-link--active {\n\t\tborder-left: 6px solid colours.$ontario-colour-black;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n.ontario-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.6);\n\twidth: 100%;\n\theight: 100%;\n\tz-index: zIndex.$ontario-z-index-above-medium;\n}\n\n.ontario-header {\n\tposition: relative;\n\toverflow: hidden;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: flex;\n\talign-items: center;\n\theight: 5.75rem;\n\n\t.ontario-row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-end;\n\t}\n\n\tsvg {\n\t\twidth: spacing.$spacing-6;\n\t\theight: spacing.$spacing-6;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-header__logo-container {\n\ta {\n\t\tdisplay: inline-flex;\n\t\theight: 100%;\n\t\toutline: none;\n\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\t}\n\n\t\timg {\n\t\t\twidth: $ontario-header-logo-width--mobile;\n\t\t\theight: globalVariables.$ontario-logo-height;\n\n\t\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\t\twidth: $ontario-header-logo-width;\n\t\t\t\theight: globalVariables.$ontario-logo-height;\n\t\t\t}\n\t\t}\n\t}\n}\n\n.ontario-navigation__container.ontario-navigation--open {\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\t}\n}\n\n.ontario-navigation__container.ontario-navigation--closed {\n\tbackground: colours.$ontario-colour-white;\n\tposition: absolute;\n\ttransform: translateY(-100%);\n\ttransition:\n\t\ttransform 0.3s ease-in-out,\n\t\tvisibility 0.1s ease;\n\twidth: 100%;\n\tvisibility: hidden;\n\tz-index: zIndex.$ontario-z-index-above-high;\n}\n\n.ontario-header-button.ontario-navigation--open {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header-button.ontario-navigation--closed {\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header__logo-container {\n\theight: globalVariables.$ontario-logo-height;\n\n\tsvg {\n\t\twidth: $ontario-header-logo-width--mobile;\n\t\theight: globalVariables.$ontario-logo-height;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-header-logo-width;\n\t\t\theight: globalVariables.$ontario-logo-height;\n\t\t}\n\t}\n}\n\n.ontario-header__logo-container a {\n\tdisplay: inline-block;\n\theight: 100%;\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n}\n\n/* Ontario heaader search styles */\n.ontario-header__search-container {\n\tposition: relative;\n\tdisplay: none;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tdisplay: flex;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tpadding-right: math.div(2rem, 2);\n\t}\n}\n\n.ontario-input.ontario-header__search-input {\n\tborder-width: 0;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: globalVariables.$standard-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-padding;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t& ~ .ontario-header__search-submit {\n\t\t\tbackground-color: colours.$ontario-colour-link;\n\t\t\tcolor: colours.$ontario-colour-white;\n\n\t\t\tsvg {\n\t\t\t\tfill: colours.$ontario-colour-white;\n\t\t\t}\n\n\t\t\t&:hover {\n\t\t\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\t\t\tcolor: colours.$ontario-colour-white;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Remove auto X icon for IE and Edge on input area\n\t&::-ms-clear {\n\t\tdisplay: none;\n\t\twidth: 0;\n\t\theight: 0;\n\t}\n\n\t// Remove red outline around input area on Firefox\n\t&:invalid:focus {\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\t-moz-box-shadow: none;\n\t}\n\n\t&:invalid:not(:focus) {\n\t\tbox-shadow: none;\n\t\t-moz-box-shadow: none;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: $ontario-search-padding--mobile;\n\t}\n}\n\n.ontario-header__search-submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\theight: 100%;\n\tline-height: lineHeights.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-4;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: spacing.$spacing-3;\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-black;\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\n\t\tsvg {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\n\t\tsvg {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\n\t\tsvg {\n\t\t\tfill: colours.$ontario-colour-white;\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n}\n\ninput[type='reset'].ontario-header__search-reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: 11px;\n\tright: 80px;\n\theight: 28px;\n\twidth: 28px;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2;\n\tbackground-image: var(--header-search-reset);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n}\n\n/* Header menu & language toggle & close search button styles */\n.ontario-header__nav-right-container {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n\n/* Header buttons */\n.ontario-header-button {\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&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:hover,\n\t&:focus,\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-header-button--with-outline,\n.ontario-header-button--without-outline {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\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}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n}\n\n.ontario-header-button--with-outline {\n\tborder: 2px solid colours.$ontario-colour-white;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n\tpadding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;\n\n\t&:hover {\n\t\tborder: 2px solid colours.$ontario-colour-white;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\tpadding: math.div(spacing.$spacing-3, 2);\n\t}\n}\n\n.ontario-header-button--without-outline {\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n}\n\n.ontario-header__menu-toggler {\n\tpadding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;\n\n\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\tpadding-left: spacing.$spacing-2;\n\t\tpadding-right: spacing.$spacing-2;\n\t}\n\n\tspan {\n\t\tdisplay: flex;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-right: $ontario-header-menu-button-icon--margin-right;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-header__language-toggler {\n\tpadding: spacing.$spacing-3;\n\n\tabbr[title] {\n\t\ttext-decoration: none;\n\t}\n}\n\n.ontario-header__search-toggler {\n\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n\tmargin-left: spacing.$spacing-4;\n\n\tsvg {\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\tmargin-right: spacing.$spacing-1;\n\t\t}\n\t}\n}\n\n.ontario-header__search-close {\n\tflex-direction: column-reverse;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tmargin-right: spacing.$spacing-4;\n\tpadding: math.div(spacing.$spacing-5, 10) spacing.$spacing-1;\n\tposition: relative;\n\theight: 60px;\n\tdisplay: none;\n\n\tspan {\n\t\tposition: relative;\n\t\ttop: -3px;\n\t\tfont-size: spacing.$spacing-4;\n\t\tmargin-left: spacing.$spacing-0;\n\n\t\t&:last-of-type {\n\t\t\ttop: 0;\n\t\t\theight: 1.875rem;\n\t\t}\n\n\t\t@media screen and (min-width: $ontario-header-custom-breakpoint) {\n\t\t\tmargin-right: spacing.$spacing-1;\n\t\t}\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\toutline: none;\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\tsvg {\n\t\ttop: 0;\n\t}\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tflex-direction: row;\n\t\tpadding: spacing.$spacing-1 spacing.$spacing-2 spacing.$spacing-1 spacing.$spacing-4;\n\t\theight: globalVariables.$standard-input-height;\n\n\t\tspan {\n\t\t\ttop: 0;\n\t\t}\n\n\t\tsvg {\n\t\t\tposition: relative;\n\t\t\twidth: spacing.$spacing-7;\n\t\t\theight: spacing.$spacing-7;\n\t\t}\n\t}\n}\n\n.ontario-header--search-open .ontario-header__search-close {\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-header__search-close-container {\n\tdisplay: none;\n\tjustify-content: flex-end;\n\tpadding-right: 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: auto;\n\t\tpadding-left: 0;\n\t\tpadding-right: 0;\n\t}\n}\n\n@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t.ontario-header--search-open .ontario-header__logo-container,\n\t.ontario-header--search-open .ontario-header__nav-right-container {\n\t\tdisplay: none;\n\t}\n\n\t.ontario-header--search-open .ontario-header__search-close-container,\n\t.ontario-header--search-open .ontario-header__search-container,\n\t.ontario-header--search-open .ontario-header__search-close {\n\t\tdisplay: flex;\n\t}\n}\n\n/* Ontario header navigation styles */\n.ontario-navigation {\n\tposition: absolute;\n\twidth: 100%;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tposition: relative;\n\t\tmax-width: 72rem;\n\t\twidth: auto;\n\t\tmargin: spacing.$spacing-0 auto;\n\t}\n}\n\n.ontario-navigation__container {\n\tbackground: colours.$ontario-colour-white;\n\tposition: absolute;\n\ttransform: translateY(-100%);\n\ttransition:\n\t\ttransform 0.3s ease-in-out,\n\t\tvisibility 0.1s ease;\n\twidth: 100%;\n\tvisibility: hidden;\n\tz-index: zIndex.$ontario-z-index-above-high;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t\tborder-radius: 4px;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tright: spacing.$spacing-4;\n\t\ttop: calc(100% - #{spacing.$spacing-2});\n\t\tmin-width: $ontario-navigation-container-min-width;\n\t\tmax-width: 30%;\n\t\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\t}\n}\n\n.ontario-navigation ul {\n\tlist-style: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tborder-bottom: none;\n\t}\n}\n\n.ontario-header-navigation__menu-item {\n\tborder-top: 1px solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-navigation a {\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: fonts.$ontario-font-open-sans;\n\ttext-decoration: none;\n\tpadding: (spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t\tbackground-color: darken(colours.$ontario-greyscale-5, 5);\n\t}\n\n\t&:active {\n\t\ttext-decoration: underline;\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;\n\t}\n\n\t&.ontario-link--active {\n\t\tborder-left: 6px solid colours.$ontario-colour-black;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n.ontario-navigation.ontario-navigation--open .ontario-navigation__container {\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\ttransition: none;\n\t\tdisplay: block;\n\t}\n}\n\n/* Ontario header overlay styles */\n.ontario-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.6);\n\twidth: 100%;\n\theight: 100%;\n\tz-index: zIndex.$ontario-z-index-above-medium;\n}\n\n/* Ontario header helper styles */\n.ontario-header__icon-container {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n// Fractal component style coverage ↓\n.ontario-navigation .ontario-header-button {\n\tvisibility: hidden;\n\tposition: absolute;\n\tright: spacing.$spacing-4;\n\tz-index: 6;\n\n\tsvg {\n\t\twidth: 2rem;\n\t\theight: 2rem;\n\t\tmargin-bottom: 0;\n\t}\n}\n\n.ontario-navigation--open .ontario-navigation .ontario-header-button {\n\tvisibility: visible;\n}\n\n.ontario-header + .ontario-navigation .ontario-header-button {\n\ttop: -4.35rem;\n}\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/functions/global.functions' as globalFunctions;\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/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n\n$navigation-link-bg--hover: #e5e5e5;\n$navigation-max-width: 72rem;\n\n$ontario-application-header-menu-button-icon--margin-right: 6px;\n\n.ontario-application-header {\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\n\theight: 3.125rem !important;\n\tposition: relative;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\n\t> .ontario-row {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n}\n\n.ontario-application-header-container {\n\tposition: relative;\n\twidth: 100%;\n}\n\n.ontario-header-button.ontario-application-navigation--open {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n}\n\n.ontario-header-button.ontario-application-navigation--closed {\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header-button--with-outline {\n\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-white;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n\tpadding: 0.375rem spacing.$spacing-4;\n}\n\n.ontario-application-subheader .ontario-header-button,\n.ontario-application-navigation .ontario-header-button {\n\tbackground-color: colours.$ontario-greyscale-70;\n}\n\n.ontario-header-button--closed {\n\t&:focus {\n\t\tbox-shadow: none;\n\t\toutline: none;\n\t\ttransition: none;\n\t}\n}\n\n.ontario-application-header__logo,\n.ontario-application-header__logo a,\n.ontario-application-header__lang-toggle,\n.ontario-application-subheader__container,\n.ontario-application-subheader__menu-container,\n.ontario-application-subheader__menu {\n\tdisplay: flex;\n\talign-items: center;\n\toutline: none;\n}\n\n.ontario-application-header__logo a {\n\t&:focus {\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-application-header__logo svg,\n.ontario-application-header__logo img {\n\twidth: 100px;\n\theight: 25px;\n}\n\n.ontario-application-header__lang-toggle {\n\tjustify-content: flex-end;\n\n\ta {\n\t\tfont-size: globalFunctions.px-to-rem(16);\n\t\tline-height: globalFunctions.px-to-rem(22);\n\t\theight: auto;\n\t\toutline: none;\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n\t}\n}\n\n/* Ontario application subheader styles */\n.ontario-application-subheader {\n\tpadding: (spacing.$spacing-2 + spacing.$spacing-3) 0;\n\tbackground-color: darken(colours.$ontario-colour-white, 75);\n\toverflow: visible;\n\tposition: relative;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: zIndex.$ontario-z-index-neutral;\n\t}\n\n\t& > .ontario-row {\n\t\tposition: relative;\n\t}\n}\n\n.ontario-application-header-container {\n\tposition: relative;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n}\n\n.ontario-application-header > .ontario-row {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.ontario-application-subheader .ontario-header-button {\n\tvisibility: visible;\n}\n\n.ontario-application-subheader .ontario-header-button,\n.ontario-application-navigation .ontario-header-button {\n\tbackground-color: colours.$ontario-greyscale-70;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header-button--without-outline {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t&:focus {\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-application-subheader__heading {\n\tpadding: 0.375rem spacing.$spacing-0;\n\t@extend %h4-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\tmax-width: 65%;\n\n\ta {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\ttext-decoration: none;\n\n\t\t&:focus {\n\t\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\t\ttransition: all 0.1s ease-in-out;\n\t\t}\n\n\t\t&:hover,\n\t\t&:active,\n\t\t&:visited {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t\ttext-decoration: underline;\n\t\t}\n\t}\n}\n\n.ontario-application-subheader .ontario-header-button {\n\tvisibility: visible;\n\tbackground-color: colours.$ontario-greyscale-70;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header__menu-toggler {\n\tspan {\n\t\tdisplay: flex;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\t&:last-of-type {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-right: $ontario-application-header-menu-button-icon--margin-right;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-application-subheader__container {\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-application-subheader__menu {\n\tdisplay: flex;\n\talign-items: center;\n\tlist-style: none;\n\tmargin: spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-0;\n\n\tli {\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tpadding: spacing.$spacing-0;\n\t\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-3;\n\t\ttext-align: center;\n\t}\n}\n\n.ontario-application-subheader__menu-container a {\n\tbox-sizing: border-box;\n\tborder-radius: globalVariables.$global-radius;\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: inline-block;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-size: globalFunctions.px-to-rem(18);\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\theight: globalVariables.$standard-input-height;\n\tline-height: globalFunctions.px-to-rem(23);\n\toutline: none;\n\tpadding: spacing.$spacing-3;\n\ttext-align: left;\n\ttext-decoration: none;\n\twhite-space: nowrap;\n\n\t&.ontario-link--active {\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t\tborder-bottom: globalVariables.$global-radius solid colours.$ontario-colour-white;\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n\n\t&:focus {\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow;\n\t\ttransition: all 0.1s ease-in-out;\n\t}\n}\n\n.ontario-application-navigation {\n\tposition: absolute;\n\twidth: 100%;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tposition: relative;\n\t\tmax-width: $navigation-max-width;\n\t\twidth: auto;\n\t\tmargin: spacing.$spacing-0 auto;\n\t}\n}\n\n.ontario-application-navigation .ontario-header-button {\n\tvisibility: hidden;\n\tposition: absolute;\n\ttop: (-(spacing.$spacing-9) + -(spacing.$spacing-1));\n\tright: spacing.$spacing-4;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 2);\n}\n\n.ontario-application-navigation__container {\n\tbackground: colours.$ontario-colour-white;\n\tposition: absolute;\n\ttop: 0;\n\twidth: 100%;\n\tz-index: zIndex.$ontario-z-index-above-high;\n\n\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\tbackground: colours.$ontario-colour-white;\n\t\tposition: absolute;\n\t\tz-index: zIndex.$ontario-z-index-above-high;\n\t}\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tposition: absolute;\n\t\tright: spacing.$spacing-3;\n\t\ttop: -0.6rem;\n\t\tmin-width: 290px;\n\t\tmax-width: 30%;\n\t\tz-index: calc(zIndex.$ontario-z-index-above-medium + 1);\n\t\ttransition: none !important;\n\t}\n}\n\n.ontario-application-navigation ul {\n\tlist-style: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tborder-bottom: none;\n\t}\n}\n\n.ontario-application-navigation li {\n\tborder-top: 1px solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-application-navigation a {\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: fonts.$ontario-font-open-sans;\n\ttext-decoration: none;\n\tpadding: calc(spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t\tbackground-color: $navigation-link-bg--hover;\n\t}\n\n\t&:active {\n\t\ttext-decoration: underline;\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;\n\t}\n\n\t&.ontario-link--active {\n\t\tborder-left: 6px solid colours.$ontario-colour-black;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n.ontario-navigation--open {\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\t}\n}\n\n.ontario-navigation--closed {\n\tbackground: colours.$ontario-colour-white;\n\tposition: absolute;\n\ttransform: translateY(-100%);\n\ttransition:\n\t\ttransform 0.3s ease-in-out,\n\t\tvisibility 0.1s ease;\n\twidth: 100%;\n\tvisibility: hidden;\n\tz-index: zIndex.$ontario-z-index-above-high;\n}\n\n.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\ttransition: none;\n\t\tdisplay: block;\n\t}\n}\n\n.ontario-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.6);\n\twidth: 100%;\n\theight: 100%;\n\tz-index: zIndex.$ontario-z-index-above-medium;\n}\n\n.ontario-header-button.ontario-navigation--open {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-60;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n.ontario-header-button.ontario-navigation--closed {\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t}\n}\n\n/* Header buttons */\n.ontario-header-button {\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\n\tdisplay: flex;\n\talign-items: center;\n\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&:focus {\n\t\t@extend %ontario-focus;\n\t}\n\n\t&:hover,\n\t&:focus,\n\t&:visited {\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n}\n\n.ontario-header-button--with-outline,\n.ontario-header-button--without-outline {\n\tbackground-color: colours.$ontario-colour-black;\n\tcolor: colours.$ontario-colour-white;\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}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n}\n\n.ontario-header-button--with-outline {\n\tborder: 2px solid colours.$ontario-colour-white;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n\tpadding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;\n\n\t&:hover {\n\t\tborder: 2px solid colours.$ontario-colour-white;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\tbackground-color: colours.$ontario-greyscale-70;\n\t}\n\n\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\tpadding: math.div(spacing.$spacing-3, 2);\n\t}\n}\n\n.ontario-header__menu-toggler {\n\tpadding: math.div(spacing.$spacing-3, 2) spacing.$spacing-4;\n\n\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\tpadding-left: spacing.$spacing-2;\n\t\tpadding-right: spacing.$spacing-2;\n\t}\n\n\tspan {\n\t\tdisplay: flex;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-right: 6px;\n\n\t\t@media screen and (max-width: breakpoints.$xsmall-breakpoint) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n}\n\n.ontario-application-navigation__container {\n\tbackground: colours.$ontario-colour-white;\n\tposition: absolute;\n\ttransform: translateY(-100%);\n\ttransition:\n\t\ttransform 0.3s ease-in-out,\n\t\tvisibility 0.1s ease;\n\twidth: 100%;\n\tvisibility: hidden;\n\tz-index: zIndex.$ontario-z-index-above-high;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tbox-shadow: 0 globalVariables.$global-radius 12px rgba(0, 0, 0, 0.3);\n\t\tborder-radius: globalVariables.$global-radius;\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tright: spacing.$spacing-4;\n\t\ttop: calc(100% - #{spacing.$spacing-2});\n\t\tmin-width: 290px; // this value is to control the min-width size the dropdown navigation list can be\n\t\tmax-width: 30%;\n\t\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\t}\n}\n\n.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container {\n\tbackground: colours.$ontario-colour-white;\n\tvisibility: visible;\n\ttransform: translateY(0);\n\ttransition: transform 0.4s ease-in-out;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\ttransition: none;\n\t\tdisplay: block;\n\t}\n}\n\n.ontario-application-navigation.ontario-navigation--open {\n\tbackground: colours.$ontario-colour-white;\n\tz-index: zIndex.$ontario-z-index-above-high;\n}\n\n.ontario-application-navigation ul {\n\tlist-style: none;\n\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tborder-bottom: none;\n\t}\n}\n\n.ontario-application-navigation li {\n\tborder-top: 1px solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n\tmargin-bottom: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tborder-bottom: 1px solid colours.$ontario-greyscale-20;\n\t}\n}\n\n.ontario-application-navigation a {\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: block;\n\tfont-size: 1.125rem;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-family: fonts.$ontario-font-open-sans;\n\ttext-decoration: none;\n\tpadding: (spacing.$spacing-3 - math.div(spacing.$spacing-1, 3.25)) spacing.$spacing-5;\n\n\t&:hover {\n\t\ttext-decoration: underline;\n\t\tbackground-color: $navigation-link-bg--hover;\n\t}\n\n\t&:active {\n\t\ttext-decoration: underline;\n\t\tbackground-color: colours.$ontario-greyscale-20;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;\n\t}\n\n\t&.ontario-link--active {\n\t\tborder-left: 6px solid colours.$ontario-colour-black;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n/* Ontario application header overlay styles */\n.ontario-overlay {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground: rgba(0, 0, 0, 0.6);\n\twidth: 100%;\n\theight: 100%;\n\tz-index: zIndex.$ontario-z-index-above-medium;\n}\n\n/* Ontario header helper styles */\n.ontario-header__icon-container {\n\tdisplay: flex;\n\talign-items: center;\n}\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/functions/global.functions' as globalFunctions;\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/z-index.variables' as zIndex;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';\n@use './ontario-application-header.scss';\n\n.ontario-service-header {\n\theight: 3.125rem;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n}\n\n.ontario-service-header__logo,\n.ontario-service-header__logo a,\n.ontario-service-header__lang-toggle,\n.ontario-service-subheader__container,\n.ontario-service-subheader__menu-container,\n.ontario-service-subheader__menu {\n\tdisplay: flex;\n}\n\n.ontario-service-header__logo img {\n\twidth: 100px;\n\theight: 25px;\n}\n\n.ontario-service-header__lang-toggle {\n\tjustify-content: flex-end;\n\n\ta {\n\t\tfont-size: globalFunctions.px-to-rem(16);\n\t\tline-height: globalFunctions.px-to-rem(22);\n\t\theight: auto;\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-3;\n\t}\n}\n\n.ontario-service-subheader {\n\tpadding: spacing.$spacing-4 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-colour-service-ontario-header-brand;\n\toverflow: hidden;\n\tposition: relative;\n\tz-index: calc(zIndex.$ontario-z-index-above-high + 1);\n\n\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: zIndex.$ontario-z-index-neutral;\n\t}\n\n\t& > .ontario-row {\n\t\tposition: relative;\n\t}\n}\n\n.ontario-service-subheader .ontario-header-button {\n\tdisplay: flex;\n}\n\n.ontario-service-subheader .ontario-header-button {\n\tbackground-color: colours.$ontario-colour-service-ontario-header-brand;\n\n\t.ontario-icon {\n\t\twidth: 2rem;\n\t\theight: 2rem;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-service-ontario-header-hover;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-service-ontario-header-active;\n\t}\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;\n\t}\n}\n\n.ontario-service-subheader__link {\n\ttext-decoration: none;\n}\n\n.ontario-service-subheader__heading-container {\n\ta & {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\ttext-decoration: none;\n\n\t\t&:hover,\n\t\t&:active,\n\t\t&:visited {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t\ttext-decoration: underline;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;\n\t\t}\n\t}\n}\n\n.ontario-service-subheader__heading {\n\t@extend %h3-styles;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tpadding: spacing.$spacing-0 spacing.$spacing-0 math.div(spacing.$spacing-1, 2) spacing.$spacing-0;\n\tmargin-bottom: spacing.$spacing-0;\n\ttext-decoration: none;\n}\n\n.ontario-service-subheader__description {\n\tpadding: math.div(spacing.$spacing-1, 2) spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0;\n\t@extend %h5-styles;\n\tmargin-bottom: spacing.$spacing-0;\n\tcolor: colours.$ontario-colour-white;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\ttext-decoration: none;\n}\n\n.ontario-service-subheader__container {\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-service-subheader__menu {\n\tlist-style: none;\n\tmargin: spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-0;\n\talign-items: center;\n}\n\n.ontario-service-subheader__menu li {\n\tpadding: spacing.$spacing-0;\n\tmargin-left: spacing.$spacing-4;\n}\n\n.ontario-service-subheader__menu a {\n\tborder-radius: globalVariables.$global-radius;\n\tcolor: colours.$ontario-colour-white;\n\tdisplay: block;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-size: globalFunctions.px-to-rem(18);\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\theight: globalVariables.$standard-input-height;\n\tline-height: globalFunctions.px-to-rem(23);\n\tpadding: spacing.$spacing-3;\n\ttext-decoration: none;\n\twhite-space: nowrap;\n\n\t&.ontario-link--active {\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t\tborder-bottom: globalFunctions.px-to-rem(4) solid colours.$ontario-colour-white;\n\t}\n\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tbackground-color: colours.$ontario-colour-service-ontario-header-hover;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-white;\n\t\tbackground-color: colours.$ontario-colour-service-ontario-header-active;\n\t}\n\n\t&:focus {\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-service-ontario-header-focus;\n\t}\n}\n\n.ontario-overlay {\n\tdisplay: none;\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tbackground: rgba(colours.$ontario-colour-black, 0.6);\n\twidth: 100%;\n\theight: 100%;\n\tz-index: zIndex.$ontario-z-index-above-medium;\n}\n\n.ontario-navigation--open {\n\t.ontario-service-subheader .ontario-header-button:first-of-type {\n\t\tdisplay: none;\n\t}\n\n\t.ontario-service-subheader .ontario-header-button:last-of-type {\n\t\tdisplay: flex;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\t.ontario-service-subheader-menu__container {\n\t\t\tposition: relative;\n\t\t\tz-index: calc(zIndex.$ontario-z-index-above-medium + 1);\n\t\t}\n\t}\n\n\t.ontario-overlay {\n\t\tdisplay: block;\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n}\n\n.ontario-colour-service-ontario-header-brand {\n\tbackground-color: colours.$ontario-colour-service-ontario-header-brand;\n}\n\n.ontario-colour-service-ontario-header-focus {\n\tbackground-color: colours.$ontario-colour-service-ontario-header-focus;\n}\n\n.ontario-colour-service-ontario-header-hover {\n\tbackground-color: colours.$ontario-colour-service-ontario-header-hover;\n}\n\n.ontario-colour-service-ontario-header-active {\n\tbackground-color: colours.$ontario-colour-service-ontario-header-active;\n}\n","import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';\n\nimport { Input } from '../../utils/common/input/input';\nimport {\n\tMenuItem,\n\tApplicationHeaderInfo,\n\tLanguageToggleOptions,\n\tOntarioMenuItems,\n\tOntarioHeaderType,\n} from './ontario-header.interface';\n\nimport OntarioIconClose from '../ontario-icon/assets/ontario-icon-close-header.svg';\nimport OntarioIconMenu from '../ontario-icon/assets/ontario-icon-menu-header.svg';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport OntarioIconSearchWhite from '../ontario-icon/assets/ontario-icon-search-white.svg';\nimport OntarioHeaderDefaultData from './ontario-header-default-data.json';\n\nimport { Language } from '../../utils/common/language-types';\nimport { getImageAssetSrcPath } from '../../utils/helper/assets';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\n\nimport translations from '../../translations/global.i18n.json';\nimport config from '../../config.json';\n\n@Component({\n\ttag: 'ontario-header',\n\tstyleUrls: ['ontario-header.scss', 'ontario-application-header.scss', 'service-ontario-header.scss'],\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioHeader {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The type of header.\n\t */\n\t@Prop() type?: OntarioHeaderType = 'application';\n\n\t/**\n\t * Information pertaining to the application header. This is only necessary for the 'application' header type.\n\t *\n\t * This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.\n\t *\n\t * @example\n\t *  <ontario-header\n\t *    type=\"application\"\n\t *    application-header-info='{\n\t *      \"title\": \"Application name\",\n\t *      \"href\": \"/application-homepage\",\n\t *      \"maxSubheaderDesktopLinks\": \"3\",\n\t *      \"maxSubheaderTabletLinks\": \"2\",\n\t *      \"maxSubheaderMobileLinks\": \"1\"\n\t *    }'>\n\t *  </ontario-header>\n\t */\n\t@Prop() applicationHeaderInfo: ApplicationHeaderInfo | string;\n\n\t/**\n\t * The items that will go inside the menu.\n\t */\n\t@Prop() menuItems: MenuItem[] | string;\n\n\t/**\n\t * Option to disable fetching of the dynamic menu from the Ontario Header API\n\t *\n\t * @example\n\t * \t<ontario-header\n\t * \t\t\ttype=\"ontario\"\n\t * \t\t\tdisable-dynamic-menu=\"false\"\n\t *\t\t\tmenu-items='[{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t}]'>\n\t *\t</ontario-header>\n\t */\n\t@Prop() disableDynamicMenu: boolean = false;\n\n\t/**\n\t * Information pertaining to the language toggle links.\n\t *\n\t * @example\n\t * <ontario-header\n\t * \tlanguage-toggle-options='{\n\t *    \"englishLink\": \"/en\",\n\t *    \"frenchLink\": \"/fr\"\n\t *  }'\n\t *  ...\n\t * >\n\t * </ontario-header>\n\t */\n\t@Prop() languageToggleOptions?: LanguageToggleOptions | string;\n\n\t/**\n\t * A custom function to pass to the language toggle button.\n\t */\n\t@Prop() customLanguageToggle?: (event: globalThis.Event) => void;\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 none is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * The base path to an assets folder containing the Design System assets\n\t */\n\t@Prop() assetBasePath: string;\n\n\t/**\n\t * The application header information is reassigned to applicationHeaderInfoState for parsing\n\t */\n\t@State() private applicationHeaderInfoState: ApplicationHeaderInfo;\n\n\t/**\n\t * The menuItems is reassigned to itemState for parsing\n\t *\n\t * @example\n\t * \t<ontario-header\n\t * \t\t\ttype=\"ontario\"\n\t * \t\t\tdisable-dynamic-menu=\"true\"\n\t *\t\t\tmenu-items='[{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Hint\",\n\t *\t\t\t\t\"href\": \"/ontario-hint\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t}]'>\n\t *\t</ontario-header>\n\t */\n\t@State() private menuItemState: MenuItem[];\n\n\t/**\n\t * Check to see if menu is dynamic or static\n\t */\n\t@State() private isDynamicMenu: boolean = false;\n\n\t/**\n\t * The languageToggleOptions is reassigned to languageState for parsing\n\t *\n\t * @example\n\t * \t<ontario-header\n\t *\t\tlanguage-toggle-options='{\n\t *\t\t\t\"englishLink\":\"/en\",\n\t *\t\t\t\"frenchLink\": \"/fr\"\n\t *\t\t}'\n\t *\t</ontario-header>\n\t */\n\t@State() private languageState: LanguageToggleOptions;\n\n\t/**\n\t * Toggler for the menu and the search button\n\t */\n\t@State() menuToggle: boolean = false;\n\t@State() searchToggle?: boolean = false;\n\n\t/**\n\t * Assigning values to elements to use them as ref\n\t */\n\theader!: HTMLElement;\n\tmenuButton!: HTMLElement;\n\tmenuButtonDesktop!: HTMLElement;\n\tmenuButtonTablet!: HTMLElement;\n\tmenuButtonMobile!: HTMLElement;\n\tsearchBar!: HTMLInputElement;\n\tsearchButton!: HTMLInputElement;\n\n\t@State() translations: any = translations;\n\n\t@Watch('applicationHeaderInfo')\n\tprivate parseApplicationHeaderInfo() {\n\t\tconst applicationHeaderInfo = this.applicationHeaderInfo;\n\t\tif (applicationHeaderInfo) {\n\t\t\tif (typeof applicationHeaderInfo === 'string')\n\t\t\t\tthis.applicationHeaderInfoState = JSON.parse(applicationHeaderInfo);\n\t\t\telse this.applicationHeaderInfoState = applicationHeaderInfo;\n\t\t}\n\t}\n\n\t@Watch('menuItems')\n\tparseMenuItems() {\n\t\tconst isEnglish = this.language === 'en';\n\n\t\tif (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {\n\t\t\tthis.menuItemState = JSON.parse(this.menuItems);\n\t\t\tthis.isDynamicMenu = false;\n\t\t} else if (Array.isArray(this.menuItems) && this.type === 'application') {\n\t\t\tthis.menuItemState = this.menuItems;\n\t\t\tthis.isDynamicMenu = false;\n\t\t} else {\n\t\t\tthis.menuItemState = isEnglish ? OntarioHeaderDefaultData.en : OntarioHeaderDefaultData.fr;\n\t\t\tthis.isDynamicMenu = false;\n\t\t}\n\t}\n\n\t@Watch('languageToggleOptions')\n\tprivate parseLanguage() {\n\t\tconst languageToggleOptions = this.languageToggleOptions;\n\t\tif (languageToggleOptions) {\n\t\t\tif (typeof languageToggleOptions === 'string') {\n\t\t\t\tthis.languageState = JSON.parse(languageToggleOptions);\n\t\t\t} else {\n\t\t\t\tthis.languageState = languageToggleOptions;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Logic to close the menu when anything outside the menu is clicked\n\t */\n\t@Listen('click', { capture: true, target: 'window' })\n\thandleClick(event: any) {\n\t\t// if the button is clicked, return\n\t\tif (\n\t\t\tevent.composedPath().includes(this.menuButton) ||\n\t\t\tevent.composedPath().includes(this.menuButtonDesktop) ||\n\t\t\tevent.composedPath().includes(this.menuButtonTablet) ||\n\t\t\tevent.composedPath().includes(this.menuButtonMobile)\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// If the click was outside the current component, do the following\n\t\tif (this.menuToggle) this.menuToggle = !this.menuToggle;\n\t}\n\n\t/**\n\t * This listens for the `setAppLanguage` event sent from the language toggle when it is is connected to the DOM.\n\t * 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> | Language) {\n\t\tthis.language = validateLanguage(event);\n\t\tthis.parseMenuItems();\n\t}\n\n\t/**\n\t * This listens for the `headerLanguageToggled` event sent from the language toggle when it is is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleLanguageToggle(event: CustomEvent<{ oldLanguage: Language; newLanguage: Language }>) {\n\t\tthis.handleSetAppLanguage(event.detail.newLanguage);\n\t}\n\n\t/**\n\t * Logic to handle the menu toggling\n\t */\n\thandleMenuToggle = () => {\n\t\tthis.menuToggle = !this.menuToggle;\n\t\tthis.searchToggle = undefined;\n\t};\n\n\t/**\n\t * Logic to handle the search toggling\n\t */\n\thandleSearchToggle = () => {\n\t\tthis.searchToggle = !this.searchToggle;\n\t};\n\n\t/**\n\t * event.preventDefault(): https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault\n\t * location.href: https://developer.mozilla.org/en-US/docs/Web/API/Location/href\n\t */\n\thandleSubmit = (event: any) => {\n\t\tevent.preventDefault();\n\t\tlocation.href = `${this.translations.header.ontarioSearchURL[`${this.language}`]}${event.target[0].value}`;\n\t};\n\n\t/**\n\t * Logic to make the focus go back to the menu button when the list ends\n\t */\n\ttrapMenuFocus = (e: any) => {\n\t\tlet dataType = e.target?.dataset.type;\n\t\tif (dataType === 'app-desktop') {\n\t\t\tthis.menuButtonDesktop.focus();\n\t\t} else if (dataType === 'app-tablet') {\n\t\t\tthis.menuButtonTablet.focus();\n\t\t} else if (dataType === 'app-mobile') {\n\t\t\tthis.menuButtonMobile.focus();\n\t\t} else {\n\t\t\tthis.menuButton.focus();\n\t\t}\n\t};\n\n\t/**\n\t * Call to Ontario Menu API to fetch linksets to populate header component\n\t */\n\tasync fetchOntarioMenu() {\n\t\tconst isEnglish = this.language === 'en';\n\n\t\t// If menu has already been fetched and contains dynamic menu items, do not run fetch again\n\t\tif (!this.isDynamicMenu) {\n\t\t\tconst apiUrl = isEnglish\n\t\t\t\t? (config.ONTARIO_HEADER_API_URL_EN as string)\n\t\t\t\t: (config.ONTARIO_HEADER_API_URL_FR as string);\n\n\t\t\tconst response = await fetch(apiUrl)\n\t\t\t\t.then((response) => response.json())\n\t\t\t\t.then((json) => json.linkset[0].item as OntarioMenuItems[])\n\t\t\t\t.catch(() => {\n\t\t\t\t\tconsole.error('Unable to retrieve data from Ontario Menu API');\n\t\t\t\t\treturn [];\n\t\t\t\t});\n\n\t\t\tif (response.length > 0) {\n\t\t\t\tconst externalMenuItems = response.map((item) => {\n\t\t\t\t\treturn { href: item.href, title: item.title };\n\t\t\t\t});\n\t\t\t\tthis.menuItemState = externalMenuItems;\n\t\t\t\tthis.isDynamicMenu = true;\n\t\t\t}\n\t\t}\n\t\treturn;\n\t}\n\n\t/**\n\t * Generate the full path to an image asset based on the base asset path.\n\t *\n\t * - If `assetBasePath` is provided, it is used as the base path.\n\t * - If not, attempts to use Stencil's `getAssetPath` (for Stencil/Angular builds).\n\t * - If that fails (e.g., in React), falls back to `/assets/`, assuming assets are in the public folder.\n\t *\n\t * This allows the component to work across multiple environments (Stencil, Angular, React).\n\t *\n\t * @param imageName - The name of the image file.\n\t * @returns The full image path as a string.\n\t */\n\tprivate getImageAssetSrcPath(imageName: string): string {\n\t\treturn getImageAssetSrcPath(imageName, this.assetBasePath);\n\t}\n\n\t/**\n\t * This function generates the menu items in a <li>, accordingly, to the given parameters.\n\t *\n\t * href and title are necessary, but rest are not.\n\t *\n\t * @param href - the href of the menu item\n\t * @param title - the title of the menu item\n\t * @param linkIsActive - when set to true, this will add the classes necessary to style the link in a way that indicates to the user what the active page/link is\n\t * @param liClass - if there is a class that is related to the <a> portion of the menu item, put it here\n\t * @param onClick - for any custom onClick event a user might want to add to their menu links\n\t * @param onBlur - when set to true, it will call the function trapMenuFocus(), otherwise nothing is done (used in lastLink)\n\t */\n\tprivate generateMenuItem(\n\t\thref: string,\n\t\ttitle: string,\n\t\tlinkIsActive: boolean | undefined,\n\t\ttype: string,\n\t\tliClass?: string,\n\t\tonClick?: any,\n\t\tonBlur?: boolean,\n\t) {\n\t\treturn (\n\t\t\t<li class={liClass}>\n\t\t\t\t<a\n\t\t\t\t\tclass={linkIsActive === true ? `ontario-link--active` : ``}\n\t\t\t\t\thref={href}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tonBlur={onBlur ? this.trapMenuFocus : undefined}\n\t\t\t\t\tdata-type={type}\n\t\t\t\t>\n\t\t\t\t\t{title}\n\t\t\t\t</a>\n\t\t\t</li>\n\t\t);\n\t}\n\n\t/**\n\t * This function generates the menu dropdown button for the ontario header component.\n\t *\n\t * @param viewportSize - the size of the screen where the function is being called. It can either be set to `desktop`, `tablet` or `mobile`. This dictates the classes used on the menu button, as well as the ref to keep the focus trapped when the menu is open.\n\t */\n\tprivate renderMenuButton(viewportSize: string) {\n\t\tif (!this.isMenuVisible(viewportSize)) {\n\t\t\treturn;\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\tclass={\n\t\t\t\t\tviewportSize === 'desktop'\n\t\t\t\t\t\t? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-large'\n\t\t\t\t\t\t: viewportSize === 'tablet'\n\t\t\t\t\t\t\t? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large'\n\t\t\t\t\t\t\t: viewportSize === 'mobile'\n\t\t\t\t\t\t\t\t? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-small-only'\n\t\t\t\t\t\t\t\t: 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline'\n\t\t\t\t}\n\t\t\t\tid={this.type === 'ontario' ? 'ontario-header-menu-toggler' : 'ontario-application-header-menu-toggler'}\n\t\t\t\taria-controls=\"ontario-navigation\"\n\t\t\t\taria-label={\n\t\t\t\t\tthis.menuToggle\n\t\t\t\t\t\t? this.translations.header.closeMenu[`${this.language}`]\n\t\t\t\t\t\t: this.translations.header.openMenu[`${this.language}`]\n\t\t\t\t}\n\t\t\t\tonClick={this.handleMenuToggle}\n\t\t\t\ttype=\"button\"\n\t\t\t\tref={\n\t\t\t\t\tviewportSize === 'desktop'\n\t\t\t\t\t\t? (el) => (this.menuButtonDesktop = el as HTMLInputElement)\n\t\t\t\t\t\t: viewportSize === 'tablet'\n\t\t\t\t\t\t\t? (el) => (this.menuButtonTablet = el as HTMLInputElement)\n\t\t\t\t\t\t\t: viewportSize === 'mobile'\n\t\t\t\t\t\t\t\t? (el) => (this.menuButtonMobile = el as HTMLInputElement)\n\t\t\t\t\t\t\t\t: (el) => (this.menuButton = el as HTMLInputElement)\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<span class=\"ontario-header__icon-container\" innerHTML={this.menuToggle ? OntarioIconClose : OntarioIconMenu} />\n\t\t\t\t<span>Menu</span>\n\t\t\t</button>\n\t\t);\n\t}\n\n\t/**\n\t * A helper function to generate navigation dropdown links with onBlur functionality. This is used for the application header.\n\t *\n\t * @param item - the menu item to be looped over (contains the title and href)\n\t * @param index\n\t * @param links - the number of links associated with the maxSubheader[size]Links in the application header info prop. This will determine how many links should be displayed in the dropdown.\n\t * @param viewportSize - the size of the viewport. It can be set to `desktop`, `tablet` or `mobile`.\n\t * @returns\n\t */\n\tprivate generateNavigationLinks(item: MenuItem, index: number, links: number | undefined, viewportSize: string) {\n\t\tconst lastLink =\n\t\t\tindex + 1 === (links ? this.menuItemState.length - links : this.menuItemState.length) ? true : false;\n\n\t\treturn this.generateMenuItem(\n\t\t\titem.href,\n\t\t\titem.title,\n\t\t\titem.linkIsActive,\n\t\t\tviewportSize,\n\t\t\t'',\n\t\t\titem.onClickHandler,\n\t\t\tlastLink,\n\t\t);\n\t}\n\n\t/**\n\t * The onEscapePressed function clears the searchbar form when Escape is pressed\n\t */\n\tprivate onEscapePressed(event: any) {\n\t\tif (event.key === 'Escape') {\n\t\t\tevent.path[0].value = '';\n\t\t}\n\t}\n\n\tprivate isMenuVisible(viewportSize: string) {\n\t\tconst { menuItemState, applicationHeaderInfoState } = this;\n\t\tconst { maxSubheaderMobileLinks, maxSubheaderTabletLinks, maxSubheaderDesktopLinks } =\n\t\t\tapplicationHeaderInfoState ?? {};\n\n\t\tconst numOfMenuItems = menuItemState?.length ?? 0;\n\n\t\tif (numOfMenuItems <= 0) {\n\t\t\treturn false;\n\t\t}\n\n\t\tif (viewportSize === 'mobile') {\n\t\t\treturn numOfMenuItems - (maxSubheaderMobileLinks ?? 0) > 0;\n\t\t}\n\n\t\tif (viewportSize === 'tablet') {\n\t\t\treturn numOfMenuItems - (maxSubheaderTabletLinks ?? 0) > 0;\n\t\t}\n\n\t\tif (viewportSize === 'desktop') {\n\t\t\treturn numOfMenuItems - (maxSubheaderDesktopLinks ?? 0) > 0;\n\t\t}\n\n\t\treturn true;\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseApplicationHeaderInfo();\n\t\tthis.parseMenuItems();\n\t\tthis.parseLanguage();\n\t}\n\n\tcomponentDidRender() {\n\t\tif (this.disableDynamicMenu === false && this.type === 'ontario') {\n\t\t\tthis.fetchOntarioMenu();\n\t\t}\n\t}\n\n\t/**\n\t * Handles the focus when menu/toggle button is clicked.\n\t * When search button is clicked, the search bar is in focus,\n\t * when the closed button is clicked, the search button is back into focus.\n\t * When the menu is closed, the menu button should be out of focus.\n\t */\n\tcomponentDidUpdate() {\n\t\tif (this.type == 'ontario') {\n\t\t\tif (this.searchToggle === true) this.searchBar.focus();\n\t\t\tif (this.searchToggle === false) this.searchButton.focus();\n\t\t\tif (this.menuToggle === false) this.menuButton.blur();\n\t\t}\n\t}\n\n\trender() {\n\t\tconst isServiceOntarioType = this.type === 'serviceOntario';\n\n\t\tif (this.type == 'ontario') {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t<div class=\"ontario-header__container\" ref={(el) => (this.header = el as HTMLInputElement)}>\n\t\t\t\t\t\t<header\n\t\t\t\t\t\t\tclass={this.searchToggle ? 'ontario-header ontario-header--search-open' : 'ontario-header'}\n\t\t\t\t\t\t\tid=\"ontario-header\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t\t\t\t{/* Ontario header logo */}\n\t\t\t\t\t\t\t\t<div class=\"ontario-header__logo-container ontario-columns ontario-small-2 ontario-medium-4 ontario-large-3\">\n\t\t\t\t\t\t\t\t\t<a href={this.translations.header.logoLink[`${this.language}`]}>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ontario-show-for-medium\"\n\t\t\t\t\t\t\t\t\t\t\tsrc={this.getImageAssetSrcPath('ontario-logo--desktop.svg')}\n\t\t\t\t\t\t\t\t\t\t\talt={this.translations.header.logoAltText[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tclass=\"ontario-show-for-small-only\"\n\t\t\t\t\t\t\t\t\t\t\tsrc={this.getImageAssetSrcPath('ontario-logo--mobile.svg')}\n\t\t\t\t\t\t\t\t\t\t\talt={this.translations.header.logoAltText[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{/* Ontario header search input */}\n\t\t\t\t\t\t\t\t<form\n\t\t\t\t\t\t\t\t\tname=\"searchForm\"\n\t\t\t\t\t\t\t\t\tid=\"ontario-search-form-container\"\n\t\t\t\t\t\t\t\t\tonSubmit={this.handleSubmit}\n\t\t\t\t\t\t\t\t\tclass=\"ontario-header__search-container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6\"\n\t\t\t\t\t\t\t\t\tnovalidate\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<label htmlFor=\"ontario-search-input-field\" class=\"ontario-show-for-sr\">\n\t\t\t\t\t\t\t\t\t\t{this.translations.header.search[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\t\t\t\t\tid=\"ontario-search-input-field\"\n\t\t\t\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\t\t\t\t\t\tclassName=\"ontario-input ontario-header__search-input\"\n\t\t\t\t\t\t\t\t\t\trequired={true}\n\t\t\t\t\t\t\t\t\t\tref={(el) => (this.searchBar = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={this.onEscapePressed}\n\t\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\t\tclassName=\"ontario-header__search-reset\"\n\t\t\t\t\t\t\t\t\t\tid=\"ontario-search-reset\"\n\t\t\t\t\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\t\t\t\t\tvalue=\"\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.translations.header.clearSearchField[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t\t<button class=\"ontario-header__search-submit\" id=\"ontario-search-submit\" type=\"submit\">\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-sr\">{this.translations.header.submit[`${this.language}`]}</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-header__icon-container\" innerHTML={OntarioIconSearch} />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</form>\n\n\t\t\t\t\t\t\t\t{/* Ontario header language toggle + menu button */}\n\t\t\t\t\t\t\t\t<div class=\"ontario-header__nav-right-container ontario-columns ontario-small-10 ontario-medium-8 ontario-large-3\">\n\t\t\t\t\t\t\t\t\t<ontario-language-toggle\n\t\t\t\t\t\t\t\t\t\turl={this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink}\n\t\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\t\tcustomLanguageToggle={this.customLanguageToggle}\n\t\t\t\t\t\t\t\t\t></ontario-language-toggle>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-header__search-toggler ontario-header-button ontario-header-button--without-outline ontario-hide-for-large\"\n\t\t\t\t\t\t\t\t\t\tid=\"ontario-header-search-toggler\"\n\t\t\t\t\t\t\t\t\t\taria-controls=\"ontario-search-form-container\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleSearchToggle}\n\t\t\t\t\t\t\t\t\t\tref={(el) => (this.searchButton = el as HTMLInputElement)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-header__icon-container\" innerHTML={OntarioIconSearchWhite} />\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-show-for-medium ontario-show\">\n\t\t\t\t\t\t\t\t\t\t\t{this.translations.header.search[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t{this.renderMenuButton('ontario-header')}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-header__search-close-container ontario-columns ontario-small-2 ontario-medium-3\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\tclass=\"ontario-header__search-close ontario-header-button ontario-header-button--without-outline\"\n\t\t\t\t\t\t\t\t\t\tid=\"ontario-header-search-close\"\n\t\t\t\t\t\t\t\t\t\taria-label={this.translations.header.closeSearch[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tonClick={this.handleSearchToggle}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span aria-hidden={`${!this.searchToggle}`}>\n\t\t\t\t\t\t\t\t\t\t\t{this.translations.header.close[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"ontario-header__icon-container\" innerHTML={OntarioIconClose} />\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</header>\n\n\t\t\t\t\t\t{/* Ontario header navigation */}\n\t\t\t\t\t\t<nav\n\t\t\t\t\t\t\trole=\"navigation\"\n\t\t\t\t\t\t\tclass={this.menuToggle ? 'ontario-navigation ontario-navigation--open' : 'ontario-navigation'}\n\t\t\t\t\t\t\tid=\"ontario-navigation\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"ontario-navigation__container\">\n\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t{/*\n\t\t\t\t\t\t\t\t\t\tMaps through all the menu items, and the last item is set to lastLink.\n\t\t\t\t\t\t\t\t\t\tWhen the focus goes away from the lastLink, return the focus to the menu button\n\t\t\t\t\t\t\t\t\t\t(only applicable pressing the \"tab\" key, not actually clicking away from the menu).\n\t\t\t\t\t\t\t\t\t*/}\n\t\t\t\t\t\t\t\t\t{this.menuItemState?.map((item, index: number) => {\n\t\t\t\t\t\t\t\t\t\tconst lastLink = index + 1 === this.menuItemState.length;\n\t\t\t\t\t\t\t\t\t\tconst activeLinkRegex = item.title.replace(/\\s+/g, '-').toLowerCase();\n\t\t\t\t\t\t\t\t\t\tconst linkIsActive = window.location.pathname.includes(activeLinkRegex);\n\t\t\t\t\t\t\t\t\t\treturn this.isDynamicMenu\n\t\t\t\t\t\t\t\t\t\t\t? this.generateMenuItem(\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.href,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.title,\n\t\t\t\t\t\t\t\t\t\t\t\t\tlinkIsActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t'ontario-header',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'ontario-header-navigation__menu-item',\n\t\t\t\t\t\t\t\t\t\t\t\t\tundefined,\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastLink,\n\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t: this.generateMenuItem(\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.href,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.title,\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.linkIsActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t'ontario-header',\n\t\t\t\t\t\t\t\t\t\t\t\t\t'ontario-header-navigation__menu-item',\n\t\t\t\t\t\t\t\t\t\t\t\t\titem.onClickHandler,\n\t\t\t\t\t\t\t\t\t\t\t\t\tlastLink,\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</nav>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.menuToggle && <div class=\"ontario-hide-for-large ontario-overlay\" />}\n\t\t\t\t</div>\n\t\t\t);\n\t\t} else {\n\t\t\treturn (\n\t\t\t\t<div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"ontario-application-header-container\"\n\t\t\t\t\t\tid=\"ontario-application-header\"\n\t\t\t\t\t\tref={(el) => (this.header = el as HTMLInputElement)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Ontario application header black bar */}\n\t\t\t\t\t\t<header class=\"ontario-application-header\" id=\"ontario-header\">\n\t\t\t\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t\t\t\t<div class=\"ontario-columns ontario-small-6 ontario-application-header__logo\">\n\t\t\t\t\t\t\t\t\t<a href={this.translations.header.logoLink[`${this.language}`]}>\n\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\tsrc={this.getImageAssetSrcPath('ontario-logo--desktop.svg')}\n\t\t\t\t\t\t\t\t\t\t\talt={this.translations.header.logoAltText[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<div class=\"ontario-columns ontario-small-6 ontario-application-header__lang-toggle\">\n\t\t\t\t\t\t\t\t\t<ontario-language-toggle\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\turl={this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink}\n\t\t\t\t\t\t\t\t\t\tcustomLanguageToggle={this.customLanguageToggle}\n\t\t\t\t\t\t\t\t\t></ontario-language-toggle>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</header>\n\n\t\t\t\t\t\t{/* Ontario application header subheader */}\n\t\t\t\t\t\t<div class=\"ontario-application-subheader-menu__container\">\n\t\t\t\t\t\t\t<section\n\t\t\t\t\t\t\t\tclass={`ontario-application-subheader ${isServiceOntarioType ? 'ontario-service-subheader' : ''}`}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-columns ontario-small-12 ontario-application-subheader__container\">\n\t\t\t\t\t\t\t\t\t\t{!isServiceOntarioType ? (\n\t\t\t\t\t\t\t\t\t\t\t<p class=\"ontario-application-subheader__heading\">\n\t\t\t\t\t\t\t\t\t\t\t\t<a href={this.applicationHeaderInfoState?.href}>{this.applicationHeaderInfoState?.title}</a>\n\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t<a href={this.applicationHeaderInfoState?.href} class=\"ontario-service-subheader__link\">\n\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"ontario-service-subheader__heading-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"ontario-service-subheader__heading\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{this.translations.header.serviceOntario[`${this.language}`]}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<p class=\"ontario-service-subheader__description\">{this.applicationHeaderInfoState?.title}</p>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t<div class=\"ontario-application-subheader__menu-container\">\n\t\t\t\t\t\t\t\t\t\t\t{/* Desktop subheader links */}\n\t\t\t\t\t\t\t\t\t\t\t{!!this.applicationHeaderInfoState?.maxSubheaderDesktopLinks && (\n\t\t\t\t\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\t\t\t\t\tclass={`${\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisServiceOntarioType\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'ontario-service-subheader__menu'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'ontario-application-subheader__menu'\n\t\t\t\t\t\t\t\t\t\t\t\t\t} ontario-show-for-large`}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.slice(0, this.applicationHeaderInfoState?.maxSubheaderDesktopLinks)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.generateMenuItem(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.href,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.title,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.linkIsActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'app-desktop',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.onClickHandler,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t\t{/* Tablet subheader links */}\n\t\t\t\t\t\t\t\t\t\t\t{!!this.applicationHeaderInfoState?.maxSubheaderTabletLinks && (\n\t\t\t\t\t\t\t\t\t\t\t\t<ul class=\"ontario-application-subheader__menu ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.slice(0, this.applicationHeaderInfoState?.maxSubheaderTabletLinks)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.generateMenuItem(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.href,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.title,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.linkIsActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'app-tablet',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.onClickHandler,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t\t{/* Mobile subheader links */}\n\t\t\t\t\t\t\t\t\t\t\t{!!this.applicationHeaderInfoState?.maxSubheaderMobileLinks && (\n\t\t\t\t\t\t\t\t\t\t\t\t<ul class=\"ontario-application-subheader__menu ontario-show-for-small-only\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t?.slice(0, this.applicationHeaderInfoState.maxSubheaderMobileLinks)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t.map((item) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tthis.generateMenuItem(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.href,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.title,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.linkIsActive,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'app-mobile',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\titem.onClickHandler,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t\t{/* Render menu button if menuItemState exists, and if there are items to display in a dropdown menu */}\n\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState !== undefined &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderDesktopLinks !== this.menuItemState.length &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.renderMenuButton('desktop')}\n\n\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState !== undefined &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderTabletLinks !== this.menuItemState.length &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.renderMenuButton('tablet')}\n\n\t\t\t\t\t\t\t\t\t\t\t{this.menuItemState !== undefined &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderMobileLinks !== this.menuItemState.length &&\n\t\t\t\t\t\t\t\t\t\t\t\tthis.renderMenuButton('mobile')}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</section>\n\t\t\t\t\t\t\t<nav\n\t\t\t\t\t\t\t\trole=\"navigation\"\n\t\t\t\t\t\t\t\tclass={\n\t\t\t\t\t\t\t\t\tthis.menuToggle === true\n\t\t\t\t\t\t\t\t\t\t? 'ontario-application-navigation ontario-navigation--open'\n\t\t\t\t\t\t\t\t\t\t: 'ontario-application-navigation'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tid=\"ontario-application-navigation\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div class=\"ontario-application-navigation__container\">\n\t\t\t\t\t\t\t\t\t{/* Ontario application header desktop menu dropdown links */}\n\t\t\t\t\t\t\t\t\t<ul class=\"ontario-show-for-large\">\n\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t?.slice(this.applicationHeaderInfoState?.maxSubheaderDesktopLinks, this.menuItemState.length)\n\t\t\t\t\t\t\t\t\t\t\t.map((item: any, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn this.generateNavigationLinks(\n\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderDesktopLinks,\n\t\t\t\t\t\t\t\t\t\t\t\t\t'app-desktop',\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\n\t\t\t\t\t\t\t\t\t{/* Ontario application header tablet menu dropdown links */}\n\t\t\t\t\t\t\t\t\t<ul class=\"ontario-show-for-medium ontario-hide-for-small ontario-hide-for-large\">\n\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t?.slice(this.applicationHeaderInfoState?.maxSubheaderTabletLinks, this.menuItemState.length)\n\t\t\t\t\t\t\t\t\t\t\t.map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn this.generateNavigationLinks(\n\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderTabletLinks,\n\t\t\t\t\t\t\t\t\t\t\t\t\t'app-tablet',\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\n\t\t\t\t\t\t\t\t\t{/* Ontario application header mobile menu dropdown links */}\n\t\t\t\t\t\t\t\t\t<ul class=\"ontario-show-for-small-only\">\n\t\t\t\t\t\t\t\t\t\t{this.menuItemState\n\t\t\t\t\t\t\t\t\t\t\t?.slice(this.applicationHeaderInfoState?.maxSubheaderMobileLinks, this.menuItemState.length)\n\t\t\t\t\t\t\t\t\t\t\t.map((item, index) => {\n\t\t\t\t\t\t\t\t\t\t\t\treturn this.generateNavigationLinks(\n\t\t\t\t\t\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\t\t\t\t\t\tindex,\n\t\t\t\t\t\t\t\t\t\t\t\t\tthis.applicationHeaderInfoState?.maxSubheaderMobileLinks,\n\t\t\t\t\t\t\t\t\t\t\t\t\t'app-mobile',\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</nav>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t\t{this.menuToggle && <div class=\"ontario-hide-for-large ontario-overlay\" />}\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\t}\n}\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/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/breakpoints.variables' as breakpoints;\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\tplaceholders;\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/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-hint-expander__container {\n\tmax-width: globalVariables.$standard-width;\n}\n\n.ontario-hint-expander__button {\n\tcolor: colours.$ontario-colour-link;\n\tcursor: pointer;\n\tbackground: none;\n\tborder: none;\n\tdisplay: flex;\n\talign-items: center;\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\ttext-align: left;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\tpadding: spacing.$spacing-0 spacing.$spacing-1 spacing.$spacing-0 spacing.$spacing-0;\n\n\t&-icon--close {\n\t\tdisplay: none;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&-icon--open {\n\t\tdisplay: inline-block;\n\t\tmargin-right: spacing.$spacing-1;\n\t}\n\n\t&:hover {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\n\t&:active {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n\n\t& > * {\n\t\tpointer-events: none;\n\t}\n}\n\n.ontario-hint-expander__content {\n\tborder-left: 4px solid colours.$ontario-greyscale-20;\n\tcolor: colours.$ontario-colour-black;\n\tbackground-color: colours.$ontario-greyscale-5;\n\tdisplay: none;\n\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 calc(#{spacing.$spacing-4} + #{spacing.$spacing-1});\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-1;\n\n\t& *:first-child {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\t& *:last-child {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t& img {\n\t\twidth: globalVariables.$full-width;\n\n\t\t@media screen and (min-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: 50%;\n\t\t}\n\t}\n}\n\n.ontario-hint-expander__content.ontario-expander__content--opened {\n\tdisplay: block;\n}\n\n.ontario-hint-expander__container.ontario-expander--active {\n\t.ontario-hint-expander__button-icon--close {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ontario-hint-expander__button-icon--open {\n\t\tdisplay: none;\n\t}\n}\n\n.ontario-hint-expander__checkbox-exists-true {\n\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n\n// Fractal component style coverage ↓\n.ontario-input + .ontario-hint-expander__container {\n\tmargin-top: -1 * spacing.$spacing-5 !important;\n}\n\n.ontario-checkboxes__item .ontario-hint-expander__container,\n.ontario-radios__item .ontario-hint-expander__container {\n\tmargin-left: spacing.$spacing-2;\n}\n\n.ontario-checkboxes__label + .ontario-hint-expander__container,\n.ontario-radios__label + .ontario-hint-expander__container {\n\tmargin-top: spacing.$spacing-3;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, Element, Event, EventEmitter, h, Prop, Watch, State } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from './hint-expander.interface';\nimport { HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-hint-expander',\n\tstyleUrl: 'ontario-hint-expander.scss',\n\tshadow: true,\n})\nexport class OntarioHintExpander implements HintExpander {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint expander question/statement\n\t */\n\t@Prop() hint: string;\n\n\t/**\n\t * Content to display as the hint, once the expander is toggled open.\n\t * Please note that any content that is passed into this prop will only be displayed as a string.\n\t * If you would like to add HTML content, supply child content to the component.\n\t *\n\t * @example\n\t * <ontario-hint-expander hint=\"This is the hint\"\n\t *   <img src=\"https://www.jquery-az.com/html/images/banana.jpg\" title=\"Title of image\" alt=\"alt text here\"/>\n\t *   <p> Here is the content beside the image </p>\n\t * </ontario-hint-expander>\n\t */\n\t@Prop({ mutable: true }) content: string;\n\n\t/**\n\t * Used to used to establish a relationship between hint text content and elements using aria-describedby. This is optional - if no ID is passed, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * Emitted when a keyboard input or mouse event occurs.\n\t */\n\t@Event() toggleExpanderEvent!: EventEmitter<MouseEvent | KeyboardEvent>;\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHint(this.hintState);\n\t}\n\n\t/*\n\t * Watch for changes to the `content` prop for validation purposes.\n\t *\n\t * Validate the `content` and make sure the `content` has a value.\n\t * Log a warning if user doesn't input a value for the `content` or element content.\n\t */\n\t@Watch('content')\n\tvalidateContent(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(' content ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\tprivate onClick = (ev: Event) => {\n\t\tconst hintExpander = ev.target as HTMLButtonElement | null;\n\t\tconst hintExpanderParent = hintExpander?.parentElement;\n\n\t\thintExpanderParent?.classList.toggle('ontario-expander--active');\n\t\tlet content = hintExpanderParent?.querySelector(\"[data-toggle='ontario-expander-content']\");\n\t\tcontent?.classList.toggle('ontario-expander__content--opened');\n\t\tcontent?.classList.contains('ontario-expander__content--opened')\n\t\t\t? content.setAttribute('aria-hidden', 'false')\n\t\t\t: content?.setAttribute('aria-hidden', 'true');\n\t\thintExpanderParent?.classList.contains('ontario-expander--active')\n\t\t\t? hintExpanderParent?.setAttribute('aria-expanded', 'true')\n\t\t\t: hintExpanderParent?.setAttribute('aria-expanded', 'false');\n\n\t\tthis.toggleExpanderEvent.emit(ev as MouseEvent);\n\t};\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t *\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint`.\n\t */\n\tvalidateHint(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(' hint ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-expander> ')\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 * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId ?? uuid();\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.validateContent(this.content);\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-hint-expander__container\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"ontario-hint-expander__button\"\n\t\t\t\t\tonClick={this.onClick}\n\t\t\t\t\tid={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-controls={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-expanded=\"false\"\n\t\t\t\t\tdata-toggle=\"ontario-collapse\"\n\t\t\t\t>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--close ontario-icon\">\n\t\t\t\t\t\t<ontario-icon-chevron-up colour=\"inherit\"></ontario-icon-chevron-up>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"ontario-hint-expander__button-icon--open\">\n\t\t\t\t\t\t<ontario-icon-chevron-down colour=\"inherit\"></ontario-icon-chevron-down>\n\t\t\t\t\t</span>\n\t\t\t\t\t{this.hint}\n\t\t\t\t</button>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"ontario-hint-expander__content\"\n\t\t\t\t\tid={`hint-expander-content-${this.getId()}`}\n\t\t\t\t\taria-labelledby={`hint-expander-button-${this.getId()}`}\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\tdata-toggle=\"ontario-expander-content\"\n\t\t\t\t>\n\t\t\t\t\t{this.hintContentType === 'string' ? this.content : <span innerHTML={this.content}></span>}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\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/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-hint {\n\tcolor: colours.$ontario-greyscale-70;\n\tdisplay: inline-block;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4 spacing.$spacing-0;\n\twidth: globalVariables.$full-width;\n\tmax-width: globalVariables.$standard-width;\n\n\tp {\n\t\tmargin-bottom: spacing.$spacing-4;\n\n\t\t&:first-of-type {\n\t\t\tmargin-top: spacing.$spacing-0;\n\t\t}\n\n\t\t&:last-of-type {\n\t\t\tmargin-bottom: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t// Fractal component style coverage ↓\n\t// This is a fix to prevent auto-detection of phone numbers in Firefox & Safari on iPhone devices\n\ta[x-apple-data-detectors] {\n\t\tcolor: inherit;\n\t\tcursor: none;\n\t\ttext-decoration: none;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State, Method } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { Hint, HintContentType } from '../../utils/common/common.interface';\n\nimport { validatePropExists } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n/**\n * Use hint text to help users understand how to complete fields in a form.\n *\n * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n */\n@Component({\n\ttag: 'ontario-hint-text',\n\tstyleUrl: 'ontario-hint-text.scss',\n\tshadow: true,\n})\nexport class OntarioHintText implements Hint {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t */\n\t@Prop({ mutable: true }) hintContentType?: HintContentType = 'string';\n\n\t/**\n\t * Text to display as the hint text statement.\n\t *\n\t * Setting the hint can be done using the host element textContent or through setting this property.  This property will take precedence.\n\t *\n\t * @example\n\t * <ontario-hint-text hint=\"Override Hint Text\">Hint Text</ontario-button>\n\t *\n\t * The resulting hint text will display `\"Override Hint Text\"`.\n\t */\n\t@Prop() hint: string;\n\n\t/*\n\t * Used to establish a relationship between the hint text content and elements using aria-describedby. This is optional -  if no ID is provided, one will be generated.\n\t */\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t@State() hintState: string;\n\n\t/**\n\t * @part hint-text - The container for the hint text content. This part can be used to apply custom styles to the hint text.\n\t */\n\n\t/**\n\t * Watch for changes to the `hintContentType` prop for validation purposes.\n\t * If none is provided, or the wrong type is provided, it will default to `string`.\n\t */\n\t@Watch('hintContentType')\n\tprivate checkHintContentType() {\n\t\tif (this.hintContentType !== 'string' && this.hintContentType !== 'html') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' hintContentType ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\n\t\t\treturn (this.hintContentType = 'string');\n\t\t}\n\n\t\treturn this.hintContentType;\n\t}\n\n\t/*\n\t * Watch for changes in the `hint` prop for validation purposes.\n\t * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).\n\t */\n\t@Watch('hint')\n\tprivate updateHintContent() {\n\t\tthis.hintState = this.hint ?? this.host.textContent ?? '';\n\t\tthis.validateHintContent(this.hintState);\n\t}\n\n\t/*\n\t * Validate the `hint` and make sure the `hint` has a value.\n\t * Log a warning if user doesn't input a value for the `hint` or element content.\n\t */\n\tvalidateHintContent(newValue: string) {\n\t\t// If element content is not provided, check whether prop exists\n\t\tif (!this.host.textContent) {\n\t\t\tif (validatePropExists(newValue)) {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(' hint ')\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-hint-text> ')\n\t\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\t/**\n\t * This method returns the ontario-hint-text id. It is used to make sure the hint text and `aria-describedby` value of other form components match when the internal hint text props are used.\n\t *\n\t * @returns {Promise<string | undefined>} The ID of the hint text element, or undefined if no ID is set.\n\t */\n\t@Method()\n\tasync getHintTextId(): Promise<string | undefined> {\n\t\treturn this.elementId;\n\t}\n\n\t/**\n\t * Set `hint` using internal component logic\n\t */\n\tcomponentWillLoad() {\n\t\tthis.updateHintContent();\n\t\tthis.checkHintContentType();\n\t\tthis.elementId = this.elementId ?? uuid();\n\t}\n\n\t/**\n\t * This helper is used to help load translations for any slots + text content passed in by the user.\n\t */\n\tcomponentDidLoad() {\n\t\tconst observer = new MutationObserver((mutations) => {\n\t\t\tmutations.forEach((mutation) => {\n\t\t\t\tif (mutation.type === 'attributes') {\n\t\t\t\t\tthis.updateHintContent();\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\tconst options = { attributes: true };\n\t\tobserver.observe(this.host, options);\n\t}\n\n\trender() {\n\t\treturn this.hintContentType === 'string' ? (\n\t\t\t<p part=\"hint-text\" id={this.getId()} class=\"ontario-hint\">\n\t\t\t\t{this.hintState}\n\t\t\t</p>\n\t\t) : (\n\t\t\t<div id={this.getId()} class=\"ontario-hint\" innerHTML={this.hintState}></div>\n\t\t);\n\t}\n}\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-accessibility',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAccessibility implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-accessibility> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-accessibility> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"accessibility\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M18.4 11.2l-4.1.2 2.3-2.6c.2-.3.3-.8.2-1.3-.1-.3-.2-.6-.5-.8l-5.4-3.2c-.4-.3-1-.2-1.4.1L6.8 6.1c-.5.5-.6 1.2-.1 1.7.4.5 1.2.5 1.7.1l2-1.8 1.9 1.1-4.2 4.3c-.1.1-.1.2-.2.2-.5.2-1 .4-1.4.7L8 13.9c.5-.2 1-.4 1.5-.4 1.9 0 3.5 1.6 3.5 3.5 0 .6-.1 1.1-.4 1.5l1.5 1.5a5.29 5.29 0 0 0 .9-3c0-1.2-.4-2.4-1.1-3.3l3.3-.3-.2 4.8c-.1.7.4 1.2 1.1 1.3h.1c.6 0 1.1-.5 1.2-1.1l.2-5.9c0-.3-.1-.7-.3-.9-.3-.3-.6-.4-.9-.4zM18 5.5a2 2 0 0 0 2-2 2 2 0 0 0-2-2 2 2 0 0 0-2 2 2 2 0 0 0 2 2zm-5.5 16.1a5.29 5.29 0 0 1-3 .9C6.5 22.5 4 20 4 17a5.29 5.29 0 0 1 .9-3l1.5 1.5c-.2.5-.4 1-.4 1.5 0 1.9 1.6 3.5 3.5 3.5.6 0 1.1-.1 1.5-.4l1.5 1.5z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-error',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertError implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-error> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-error> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"alert-error\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"\n\t\t\t\t\t\tfill=\"#cd0000\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M11 17h2v-2h-2v2zm0-4h2V7h-2v6z\" fill=\"#fff\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-information',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertInformation implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-information> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-information> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"alert-information\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\n\t\t\t\t\t\tfill=\"#1080a6\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M11 17h2v-6h-2v6zm0-8h2V7h-2v2z\" fill=\"#fff\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-success',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertSuccess implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-success> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-success> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"alert-success\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.4-1.4 3.6 3.58L17.17 7l1.4 1.42L10 17z\"\n\t\t\t\t\t\tfill=\"#118847\"\n\t\t\t\t\t/>\n\t\t\t\t\t<path d=\"M5 12l5 5 8.58-8.58L17.17 7 10 14.17 6.4 10.6 5 12z\" fill=\"#fff\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-alert-warning',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconAlertWarning implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-warning> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-alert-warning> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"alert-warning\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\" fill=\"#ffd440\" />\n\t\t\t\t\t<path d=\"M11 10h2v4h-2zm0 6h2v2h-2z\" fill=\"#000\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-camera',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconCamera implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-camera> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-camera> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"camera\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-1.8a3.2 3.2 0 0 0 0-6.4 3.2 3.2 0 1 0 0 6.4z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-chevron-down',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronDown implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-chevron-down> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-chevron-down> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"chevron-down\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M7.4 8.6l4.6 4.58 4.6-4.58L18 10l-6 6-6-6 1.4-1.4z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-chevron-left',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronLeft implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-chevron-left> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-chevron-left> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"chevron-left\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M15.4 7.4L14 6l-6 6 6 6 1.4-1.4-4.58-4.6 4.58-4.6z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-chevron-up',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconChevronUp implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-chevron-up> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-chevron-up> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"chevron-up\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M7.4 15.4l4.6-4.58 4.6 4.58L18 14l-6-6-6 6 1.4 1.4z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-email',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconEmail implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-email> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-email> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"email\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-help',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconHelp implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-help> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-help> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"help\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.6-.86.6-1.4 0-1.1-.9-2-2-2s-2 .9-2 2H8a4 4 0 1 1 8 0 3.18 3.18 0 0 1-.93 2.25z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State, Element } from '@stencil/core';\nimport { Icon } from './icon.interface';\nimport { IconSize } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-icon-mastercard',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconMastercard implements Icon {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-mastercard> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Reference to the host element\n\t * Use to check if the host element has the `colour` attribute set\n\t */\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * Validate that the `colour` attribute is not set by users\n\t * Prints a warning message if the `colour` attribute is set\n\t */\n\tvalidateColour() {\n\t\tif (this.host.hasAttribute('colour')) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' colour ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-mastercard> ')\n\t\t\t\t.addRegularText('cannot be set. The provided colour is ignored.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg class=\"svg-icon\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" id=\"mastercard\">\n\t\t\t\t\t<circle cx=\"8\" cy=\"12\" r=\"6.5\" fill=\"#eb001b\" />\n\t\t\t\t\t<circle cx=\"16\" cy=\"12\" r=\"6.5\" fill=\"#f79e1b\" />\n\t\t\t\t\t<path d=\"M12 17.124S9.5 15.5 9.5 12 12 6.876 12 6.876 14.5 8.5 14.5 12 12 17.124 12 17.124z\" fill=\"#ff5f00\" />\n\t\t\t\t\t<path\n\t\t\t\t\t\td=\"M21.173 16.85v-.3h.125v-.06H21v.06h.117v.3h.055zm.578 0v-.35h-.1l-.105.25-.105-.25h-.1v.35h.065v-.265l.098.227h.067l.098-.227v.265h.063z\"\n\t\t\t\t\t\tfill=\"#f79e1b\"\n\t\t\t\t\t/>\n\t\t\t\t\t<g fill=\"#231f20\">\n\t\t\t\t\t\t<path d=\"M5.275 21.953v-1.098a.66.66 0 0 0-.187-.503.65.65 0 0 0-.501-.192.68.68 0 0 0-.35.072c-.108.055-.2.137-.265.24-.06-.1-.145-.18-.246-.235a.64.64 0 0 0-.332-.076.58.58 0 0 0-.513.26v-.216H2.5v1.75h.384V21c-.016-.12.023-.245.105-.333s.203-.138.324-.132c.253 0 .38.165.38.46v.974h.384V21c-.016-.12.024-.244.105-.333s.202-.138.323-.132c.26 0 .384.165.384.46v.974l.384-.007zm5.687-1.75h-.626v-.53h-.384v.53h-.348v.348h.355v.806c0 .406.157.648.608.648.168.001.333-.046.476-.136l-.1-.326c-.102.06-.218.095-.337.1-.183 0-.253-.117-.253-.293v-.798h.622l-.004-.348zm3.247-.044c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.178-.047-.27-.048l.007.007zm-4.9.183a1.31 1.31 0 0 0-.714-.183c-.443 0-.732.212-.732.56 0 .286.212.46.604.516l.183.026c.21.03.308.084.308.183 0 .136-.14.212-.4.212a.93.93 0 0 1-.582-.183l-.183.297c.222.155.487.234.758.227.505 0 .798-.238.798-.57s-.23-.47-.61-.523l-.183-.026c-.165-.022-.297-.055-.297-.172s.124-.205.333-.205c.193.002.382.054.55.15l.168-.308zM19.5 20.16c-.186-.005-.368.096-.46.256v-.212h-.377v1.75h.38v-.98c0-.29.124-.45.366-.45a.62.62 0 0 1 .238.044l.117-.366c-.087-.03-.18-.047-.27-.048l.007.007zm-4.906.915c-.01.246.09.492.265.664s.423.265.67.25c.23.012.453-.063.63-.21l-.183-.308a.77.77 0 0 1-.458.158.56.56 0 0 1-.517-.56.56.56 0 0 1 .517-.56.77.77 0 0 1 .458.157l.183-.308c-.176-.146-.4-.22-.63-.21-.246-.014-.493.08-.67.25s-.274.418-.265.664v.007zm3.566 0v-.87h-.38v.212c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.405.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.87zm-1.417 0c.02-.323.338-.557.65-.484a.54.54 0 0 1 .4.422c.056.315-.195.62-.518.622-.3.004-.55-.264-.53-.56zm-4.595-.915c-.243.003-.474.103-.643.277s-.263.408-.26.65.103.474.277.643.408.262.65.26c.263.014.522-.07.727-.238l-.183-.282c-.145.116-.324.18-.51.183-.126.01-.25-.028-.35-.108s-.16-.195-.175-.32h1.3v-.146c0-.55-.34-.915-.83-.915l-.005-.004zm0 .34c.114-.003.227.042.31.12a.44.44 0 0 1 .133.304h-.915a.45.45 0 0 1 .465-.425h.007zm9.54.578V19.5h-.366v.915c-.13-.166-.34-.264-.55-.256-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.366v-.868zm.635.62c.046-.001.092.017.126.05s.052.077.052.123-.02.1-.052.123-.08.05-.126.05c-.07-.001-.136-.043-.165-.106-.018-.043-.018-.093 0-.136a.18.18 0 0 1 .095-.091c.017-.007.072-.013.07-.013zm0 .31c.035 0 .07-.015.095-.04s.036-.058.036-.09c0-.05-.03-.1-.078-.12s-.112-.01-.15.03a.14.14 0 0 0 0 .183.14.14 0 0 0 .102.04h-.005zm-1.394-1.414c.315.074.49.43.365.723a.54.54 0 0 1-.484.321.54.54 0 0 1-.501-.347.54.54 0 0 1 .619-.697zm-13.505.484v-.875h-.38v.212c-.065-.083-.148-.15-.244-.194s-.2-.066-.306-.062c-.243 0-.476.096-.647.268s-.268.404-.268.647.096.476.268.647.404.268.647.268c.21.008.42-.1.55-.256v.212h.38v-.868zm-1.417 0c.02-.32.334-.558.65-.484a.54.54 0 0 1 .399.421c.056.315-.194.62-.518.623a.55.55 0 0 1-.535-.56h.004z\" />\n\t\t\t\t\t\t<path d=\"M22.335 21.79c.017-.001.033.002.047.012.005.005.01.01.013.017s.004.014.003.02c-.005.023-.008.028-.013.032-.01.01-.024.015-.038.016l.052.06h-.04l-.048-.06h-.016v.06h-.034v-.158h.075zm-.04.03v.043h.04c.012 0 .023.002.023-.008v-.023c0-.01-.002-.013-.023-.012h-.04z\" />\n\t\t\t\t\t</g>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-notification',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconNotification implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-notification> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-notification> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"notification\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M21 19v1H3v-1l2-2v-6a6.99 6.99 0 0 1 5-6.71V4a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.3A6.99 6.99 0 0 1 19 11v6l2 2zm-7 2a2 2 0 0 1-2 2 2 2 0 0 1-2-2\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-print',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconPrint implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-print> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-print> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"print\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-sentiment-5',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconSentiment5 implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-sentiment-5> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-sentiment-5> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"sentiment-5\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M12 2a10 10 0 1 0 0 20 10.01 10.01 0 0 0 10-10A10.01 10.01 0 0 0 11.99 2zm0 18a8 8 0 1 1 0-16 8 8 0 1 1 0 16zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7zm8.5-3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3zm-7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 1 0 0 3z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-text-message',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconTextMessage implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-text-message> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-text-message> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"text-message\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM9 11H7V9h2v2zm4 0h-2V9h2v2zm4 0h-2V9h2v2z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\n","@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n\n.ontario-icon svg,\n// Fractal component style coverage ↓\n.ontario-icon {\n\tdisplay: inline-block;\n\tstroke-width: 0;\n\tstroke: currentColor;\n\tfill: currentColor;\n\t/* The default vertical-align is `baseline`, which leaves a few pixels of space below the icon. Using `center` prevents this. For icons shown alongside text, you may want to use a more precise value, e.g. `vertical-align: -4px` or `vertical-align: -0.15em`. */\n\tvertical-align: middle;\n\t/* Paths and strokes that overflow the viewBox can show in IE11. */\n\toverflow: hidden;\n}\n\n.ontario-icon--blue svg {\n\tstroke: colours.$ontario-colour-icon-blue;\n\tfill: colours.$ontario-colour-icon-blue;\n}\n\n.ontario-icon--grey svg {\n\tstroke: colours.$ontario-colour-icon-grey;\n\tfill: colours.$ontario-colour-icon-grey;\n}\n\n.ontario-icon--black svg {\n\tstroke: colours.$ontario-colour-icon-black;\n\tfill: colours.$ontario-colour-icon-black;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-icon-white;\n\tfill: colours.$ontario-colour-icon-white;\n}\n\n.ontario-icon--white svg {\n\tstroke: colours.$ontario-colour-white;\n\tfill: colours.$ontario-colour-white;\n}\n","// content automatically generated by `generate-icons.js` begins\nimport { Component, Prop, h, Watch, State } from '@stencil/core';\nimport { IconWithColour } from './icon.interface';\nimport { IconSize, IconColour, IconColours } from './icon.types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport validateColor from 'validate-color';\n\n@Component({\n\ttag: 'ontario-icon-transport-bus',\n\tstyleUrl: 'ontario-icon.scss',\n\tshadow: true,\n})\nexport class OntarioIconTransportBus implements IconWithColour {\n\t/**\n\t * The icon width will autogenerate the height since the icons are in square format, thus preserving\n\t * the aspect ratio.\n\t */\n\t@Prop() iconWidth: IconSize = 24;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's width depending on validation result.\n\t */\n\t@State() iconWidthState: number;\n\n\t/**\n\t * Watch for changes in the `iconWidth` variable for validation purpose.\n\t * If the user input is not a number or is a negative number then `iconWidth` will be set to its default (24).\n\t */\n\t@Watch('iconWidth')\n\tvalidateWidth() {\n\t\tif (isNaN(this.iconWidth) || (!isNaN(this.iconWidth) && this.iconWidth <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' icon-width ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-icon-transport-bus> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.iconWidth) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default size of`,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 24px ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.iconWidthState = 24;\n\t\t} else {\n\t\t\tthis.iconWidthState = this.iconWidth;\n\t\t}\n\t}\n\n\t/**\n\t * Set the icon's colour.\n\t */\n\t@Prop() colour: IconColour = 'black';\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconColourState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the icon's colour based on validation result.\n\t */\n\t@State() iconCustomColourState: string;\n\n\t/**\n\t * Watch for changes in the `colour` variable for validation purpose.\n\t * If the user input doesn't match one of the enum values then `colour` will be set to its default (`black`).\n\t * If a match is found in one of the enum values then `colour` will be set to the matching enum value.\n\t */\n\t@Watch('colour')\n\tvalidateColour() {\n\t\tconst isValid = validateValueAgainstArray(this.colour, IconColours);\n\t\tif (isValid) {\n\t\t\tthis.iconColourState = this.colour;\n\t\t} else {\n\t\t\tif (validateColor(this.colour)) {\n\t\t\t\tthis.iconCustomColourState = this.colour;\n\t\t\t} else {\n\t\t\t\tthis.iconColourState = this.warnDefaultColour();\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid colour warning message\n\t * @returns default colour (black)\n\t */\n\tprivate warnDefaultColour(): IconColour {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-icon-transport-bus> ')\n\t\t\t.addRegularText('was set to an invalid colour; only')\n\t\t\t.addMonospaceText(' black, blue, grey or white ')\n\t\t\t.addRegularText('are supported. The default colour')\n\t\t\t.addMonospaceText(' black ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'black';\n\t}\n\n\t/**\n\t * Stencil component lifecycle method that is called once after the component is first connected to the DOM.\n\t */\n\tcomponentWillLoad() {\n\t\tthis.validateColour();\n\t\tthis.validateWidth();\n\t}\n\n\t/**\n\t * Returns the HTML code to be rendered into a custom element.\n\t */\n\trender() {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclass={`ontario-icon ontario-icon--${this.iconColourState} ontario-icon--width-${this.iconWidthState}`}\n\t\t\t\tstyle={{ width: `${this.iconWidthState}px` }}\n\t\t\t>\n\t\t\t\t<svg\n\t\t\t\t\tclass=\"svg-icon\"\n\t\t\t\t\tstyle={{ fill: `${this.iconCustomColourState}`, stroke: `${this.iconCustomColourState}` }}\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\tid=\"transport-bus\"\n\t\t\t\t>\n\t\t\t\t\t<path d=\"M4 16c0 .88.4 1.67 1 2.22V20c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h8v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1.78c.6-.55 1-1.34 1-2.22V6c0-3.5-3.58-4-8-4s-8 .5-8 4v10zm3.5 1a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm9 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 1 1 0 3zm1.5-6H6V6h12v5z\" />\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t);\n\t}\n}\n// content automatically generated by `generate-icons.js` ends\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/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","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","@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-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","@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/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@forward '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n\n$ontario-alert-link-focus: #6b0000;\n$ontario-alert-link-active: #280000;\n\n.ontario-alert {\n\tborder-width: 0 0 0 globalFunctions.px-to-rem(4);\n\tborder-style: solid;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n}\n\n.ontario-alert__header {\n\tdisplay: -webkit-box;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}\n\n.ontario-alert__header-icon {\n\tdisplay: inline-block;\n\tvertical-align: top;\n\tmargin-right: 0.95rem;\n}\n\n.ontario-alert__header-title {\n\tmargin-bottom: spacing.$spacing-3;\n\tpadding-top: globalFunctions.px-to-rem(2);\n}\n\n.ontario-alert__body {\n\tmargin-left: 3.25rem;\n\tmax-width: globalVariables.$standard-width;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-left: spacing.$spacing-0;\n\t}\n}\n\n.ontario-alert__body p {\n\tmargin-top: spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-alert__body p:last-of-type + ul {\n\tmargin-top: spacing.$spacing-4;\n}\n\n.ontario-alert__body ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n.ontario-alert--error ul {\n\tmargin-left: 1.25rem;\n}\n\n.ontario-alert--error ul:last-of-type {\n\tmargin-bottom: spacing.$spacing-2;\n}\n\n// ---------------------\n//    Alert variations\n// ---------------------\n// informational alert\n.ontario-alert--informational {\n\tborder-color: colours.$ontario-colour-information;\n\tbackground-color: colours.$ontario-colour-information-light;\n}\n\n// warning alert\n.ontario-alert--warning {\n\tborder-color: colours.$ontario-colour-warning;\n\tbackground-color: colours.$ontario-colour-warning-light;\n}\n\n// success alert\n.ontario-alert--success {\n\tborder-color: colours.$ontario-colour-success;\n\tbackground-color: colours.$ontario-colour-success-light;\n}\n\n// error alert\n.ontario-alert--error {\n\tborder-color: colours.$ontario-colour-alert;\n\tbackground-color: colours.$ontario-colour-alert-light;\n}\n\n.ontario-alert--error a {\n\tcolor: colours.$ontario-colour-alert;\n\n\t&:hover,\n\t&:focus {\n\t\tcolor: $ontario-alert-link-focus;\n\t}\n\n\t&:active {\n\t\tcolor: $ontario-alert-link-active;\n\t}\n}\n","import { Component, h, Prop } from '@stencil/core';\nimport { PageAlert, PageAlertType } from './ontario-page-alert.interface';\n\n@Component({\n\ttag: 'ontario-page-alert',\n\tstyleUrl: 'ontario-page-alert.scss',\n\tshadow: true,\n})\nexport class OntarioPageAlert implements PageAlert {\n\t/**\n\t * The type of page alert to render. If no value is provided, the `informational` type alert would be rendered.\n\t *\n\t * There are four possible values for page alert: `informational`, `warning`, `success` or `error`.\n\t *\n\t * @example\n\t * <ontario-page-alert type=\"error\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() type: PageAlertType = 'informational';\n\n\t/**\n\t * The heading for the page alert.\n\t *\n\t * @example\n\t * <ontario-page-alert heading=\"Licence plates\">\n\t * </ontario-page-alert>\n\t */\n\t@Prop() heading: string;\n\n\t/**\n\t * The main content for the page alert. This can be rendered as either string or HTML content.\n\t *\n\t * @example\n\t * <ontario-page-alert content=\"Please look out for an email confirmation with your receipt and order number.\">\n\t * </ontario-page-alert>\n\t *\n\t * or\n\t *\n\t * <ontario-page-alert>\n\t *  <p>This is a sample page alert component using slots. <a href=\"#\">Learn more</a>.</p>\n\t * </ontario-page-alert>\n\t */\n\t@Prop() content: string;\n\n\t/**\n\t * @returns the classes of the page alert container based on the alert `type`.\n\t */\n\tprivate getClass() {\n\t\treturn `ontario-alert ontario-alert--${this.type}`;\n\t}\n\n\trenderIcon() {\n\t\tconst iconProps = { 'icon-width': 36 };\n\n\t\tswitch (this.type) {\n\t\t\tcase 'informational':\n\t\t\t\treturn <ontario-icon-alert-information {...iconProps} />;\n\n\t\t\tcase 'success':\n\t\t\t\treturn <ontario-icon-alert-success {...iconProps} />;\n\n\t\t\tcase 'warning':\n\t\t\t\treturn <ontario-icon-alert-warning {...iconProps} />;\n\n\t\t\tcase 'error':\n\t\t\t\treturn <ontario-icon-alert-error {...iconProps} />;\n\t\t}\n\t}\n\n\trenderContent() {\n\t\tconst body = this.content;\n\n\t\tif (typeof body === 'string') {\n\t\t\treturn <p>{body}</p>;\n\t\t}\n\n\t\treturn <slot />;\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class={this.getClass()}>\n\t\t\t\t<div class=\"ontario-alert__header\">\n\t\t\t\t\t<div class=\"ontario-alert__header-icon\">{this.renderIcon()}</div>\n\t\t\t\t\t<h2 class=\"ontario-alert__header-title ontario-h4\">{this.heading}</h2>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-alert__body\">{this.renderContent()}</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/z-index.variables' as zIndex;\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/1-variables/line-heights.variables' as lineheight;\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/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_form.component.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/6-components/_text-inputs.component.scss';\n@forward '../../utils/components/error-message/error-message';\n\n$ontario-radios-size: 32px;\n$ontario-radios-size-mobile: 36px;\n$ontario-input-offset: math.div((globalVariables.$touch-target-size - $ontario-radios-size), 2);\n\n.ontario-radios__item {\n\tposition: relative;\n\tdisplay: block;\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n\tpadding: spacing.$spacing-0 spacing.$spacing-6 spacing.$spacing-0;\n\n\t&:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n}\n\n.ontario-radios__input {\n\tcursor: pointer;\n\tmargin: spacing.$spacing-0;\n\tposition: absolute;\n\topacity: 0;\n\ttop: $ontario-input-offset * -1;\n\tleft: $ontario-input-offset * -1;\n\twidth: globalVariables.$touch-target-size;\n\theight: globalVariables.$touch-target-size;\n\tz-index: zIndex.$ontario-z-index-neutral;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: globalVariables.$touch-target-size-mobile;\n\t\theight: globalVariables.$touch-target-size-mobile;\n\t\ttop: $ontario-input-offset * -0.75;\n\t\tleft: $ontario-input-offset * -0.75;\n\t}\n}\n\n.ontario-radios__label {\n\tcursor: pointer;\n\tcolor: colours.$ontario-colour-black;\n\tdisplay: inline-block;\n\tfont-family: fonts.$ontario-font-raleway-modified;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalVariables.$line-height-default;\n\t// Specific spacing required in order to visually align label with input\n\tmargin: 0.2rem 0;\n\tmax-width: globalVariables.$narrow-width;\n\tpadding: spacing.$spacing-0 spacing.$spacing-3;\n\t// remove 300ms pause on mobile\n\ttouch-action: manipulation;\n\twhite-space: normal;\n\twidth: auto;\n\twhite-space: normal;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t// Specific spacing required in order to visually align label with input\n\t\tmargin: 0.3rem spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0 spacing.$spacing-4;\n\t}\n\n\t&:before {\n\t\tcontent: '';\n\t\tborder: globalVariables.$border-size-standard solid colours.$ontario-colour-black;\n\t\tborder-radius: 50%;\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: $ontario-radios-size;\n\t\theight: $ontario-radios-size;\n\t\ttransition: border 0.1s ease-in-out;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\twidth: $ontario-radios-size-mobile;\n\t\t\theight: $ontario-radios-size-mobile;\n\t\t}\n\t}\n\n\t&:after {\n\t\tcontent: '';\n\t\tborder-radius: 50%;\n\t\tborder: 10px solid colours.$ontario-colour-black;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\ttransform: translate($ontario-input-offset * 3, $ontario-input-offset * 3);\n\t\topacity: 0;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tborder: 12px solid colours.$ontario-colour-black;\n\t\t}\n\t}\n}\n\n.ontario-radios__input:focus + .ontario-radios__label:before {\n\t-moz-box-shadow: placeholders.$ontario-focus-box-shadow;\n\t-webkit-box-shadow: colours.$ontario-colour-focus;\n\t@extend %ontario-focus;\n}\n\n.ontario-radios__input:checked + .ontario-radios__label:after {\n\topacity: 1;\n}\n\n.ontario-radios__hint-expander {\n\tmargin: spacing.$spacing-3 spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-2;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-4;\n\t}\n}\n","import { Component, h, Prop, State, Event, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { RadioButtons } from './radio-buttons.interface';\nimport { RadioOption } from './radio-option.interface';\n\nimport { Input } from '../../utils/common/input/input';\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 { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\nimport {\n\tvalidateObjectExists,\n\tvalidatePropExists,\n\tvalidateLanguage,\n} from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport {\n\tInputFocusBlurEvent,\n\tRadioAndCheckboxChangeEvent,\n\tEventType,\n} from '../../utils/events/event-handler.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-radio-buttons',\n\tstyleUrl: 'ontario-radio-buttons.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioRadioButtons implements RadioButtons {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\thintTextRef: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * The text to display for the radio button legend.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *    }'\n\t *   required=\"true\"\n\t *   ...>\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() caption: Caption | string;\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * The name assigned to the radio button. 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 radio button group.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the radio button group.\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-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name=\"radios\"\n\t *   options='[\n\t * \t   {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 1\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 1.\"\n\t *\t\t  }\n\t *     }\n\t *   ]'\n\t *   hint-expander='{\n\t *     \"hint\": \"Hint expander for the radio button group\",\n\t *     \"content\": \"Example hint expander content for the radio button group.\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * This is used to determine whether the radio button is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The options for the radio button group.\n\t *\n\t * Each property will be passed in through an object in the options array.\n\t * This can either be passed in as an object directly (if using react), or as a string in HTML.\n\t * If there are multiple radio buttons in a group, each radio button will be displayed as an option.\n\t *\n\t * In the example below, the options are being passed in as a string and there are two radio buttons to be displayed in the group.\n\t *\n\t * @example\n\t * <ontario-radio-buttons\n\t *   caption='{\n\t *     \"captionText\": \"Radio legend\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t *   name=\"radios\"\n\t *   hint-text=\"Hint text for the radio button group.\"\n\t *   options='[\n\t *     {\n\t *        \"value\": \"radio-option-1\",\n\t * \t\t  \"elementId\": \"radio-1\",\n\t *        \"label\": \"Radio option 1 label\"\n\t *     },\n\t *     {\n\t *        \"value\": \"radio-option-2\",\n\t * \t\t  \"elementId\": \"radio-2\",\n\t *        \"label\": \"Radio option 2 label\",\n\t *        \"hintExpander\": {\n\t *\t\t\t  \"hint\": \"Hint expander for radio option 2\",\n\t * \t\t      \"content\": \"Example hint expander content for radio option 2.\"\n\t *\t\t  }\n\t *      }\n\t *   ]'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-radio-buttons>\n\t */\n\t@Prop() options: string | RadioOption[];\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the radio 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 radio 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 radio input onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the radio button group. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\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 * The options are re-assigned to the internalOptions array.\n\t */\n\t@State() private internalOptions: RadioOption[];\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 * Emitted when a keyboard input or mouse event occurs when a radio option has been changed.\n\t */\n\t@Event({ eventName: 'radioOnChange' }) radioOnChange: EventEmitter<RadioAndCheckboxChangeEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has lost focus.\n\t */\n\t@Event({ eventName: 'radioOnBlur' }) radioOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when a keyboard input event occurs when a radio option has gained focus.\n\t */\n\t@Event({ eventName: 'radioOnFocus' }) radioOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/**\n\t * Emitted when an error message is reported to the component.\n\t */\n\t@Event() inputErrorOccurred: EventEmitter<{ 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 */\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 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 `options` prop.\n\t *\n\t * If an `options` prop is passed, it will be parsed (if it is a string), and the result will be set to the `internalOptions` state. The result will be run through a validation function.\n\t */\n\t@Watch('options')\n\tparseOptions() {\n\t\tif (typeof this.options !== 'undefined') {\n\t\t\tif (!Array.isArray(this.options)) {\n\t\t\t\tthis.internalOptions = JSON.parse(this.options);\n\t\t\t} else {\n\t\t\t\tthis.internalOptions = this.options;\n\t\t\t}\n\t\t}\n\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-radio-buttons> ')\n\t\t\t\t.addRegularText('was not provided')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/*\n\t * Watch for changes in the `options` prop for validation purposes.\n\n\t * Validate the `options` and make sure the `options` prop has a value.\n\t * Log a warning if user doesn't input a value for the `options`.\n\t */\n\t@Watch('options')\n\tvalidateOptions(newValue: object) {\n\t\tif (validateObjectExists(newValue)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' options ')\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-radio-buttons> ')\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 `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\tupdateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\ttrue,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `language` prop to render either the English or French translations\n\t */\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t@Watch('errorMessage')\n\tbroadcastInputErrorOccurredEvent() {\n\t\t// Emit event to notify anyone who wants to listen for errors occurring\n\t\tthis.inputErrorOccurred.emit({ errorMessage: this.errorMessage ?? '' });\n\t}\n\n\t/**\n\t * Function to handle radio buttons events and the information pertaining to the radio buttons to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement | null;\n\n\t\t// Reset all internalOptions checked states\n\t\tconst changedOption = this.internalOptions\n\t\t\t.map((x) => {\n\t\t\t\tx.checked = false;\n\t\t\t\treturn x;\n\t\t\t})\n\t\t\t.find((x) => x.value === input?.value);\n\t\t// Set the new checked state for the selected value\n\t\tif (changedOption) changedOption.checked = !changedOption?.checked;\n\n\t\t// Set the value within the form\n\t\tthis.internals?.setFormValue?.(\n\t\t\tthis.internalOptions\n\t\t\t\t.filter((x) => !!x.checked)\n\t\t\t\t.reduce((formData, currentValue) => {\n\t\t\t\t\tformData.append(this.name, currentValue.value);\n\t\t\t\t\treturn formData;\n\t\t\t\t}, new FormData()),\n\t\t);\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.radioOnChange,\n\t\t\tthis.radioOnFocus,\n\t\t\tthis.radioOnBlur,\n\t\t\tundefined,\n\t\t\t'radio',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tundefined,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\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 fieldset `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.updateCaptionState(this.caption);\n\t\tthis.parseOptions();\n\t\tthis.parseHintText();\n\t\tthis.parseHintExpander();\n\t\tthis.validateName(this.name);\n\t\tthis.validateOptions(this.internalOptions);\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<fieldset class=\"ontario-fieldset\" aria-describedby={this.hintTextId}>\n\t\t\t\t\t{this.captionState.getCaption(undefined, !!this.internalHintExpander)}\n\t\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div class=\"ontario-radios\">\n\t\t\t\t\t\t<ErrorMessage message={this.errorMessage} error={error} />\n\t\t\t\t\t\t{this.internalOptions?.map((radioOption) => (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__item\">\n\t\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\t\tclassName=\"ontario-radios__input\"\n\t\t\t\t\t\t\t\t\tid={radioOption.elementId}\n\t\t\t\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\t\tvalue={radioOption.value}\n\t\t\t\t\t\t\t\t\trequired={!!this.required}\n\t\t\t\t\t\t\t\t\tchecked={!!radioOption.checked}\n\t\t\t\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\t\t\t></Input>\n\t\t\t\t\t\t\t\t<label class=\"ontario-radios__label\" htmlFor={radioOption.elementId}>\n\t\t\t\t\t\t\t\t\t{radioOption.label}\n\t\t\t\t\t\t\t\t\t{radioOption.hintExpander &&\n\t\t\t\t\t\t\t\t\t\tthis.captionState.getHintExpanderAccessibilityText(radioOption.label, true)}\n\t\t\t\t\t\t\t\t</label>\n\n\t\t\t\t\t\t\t\t{radioOption.hintExpander && (\n\t\t\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\t\t\thint={radioOption.hintExpander.hint}\n\t\t\t\t\t\t\t\t\t\t\tcontent={radioOption.hintExpander.content}\n\t\t\t\t\t\t\t\t\t\t\thintContentType={radioOption.hintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{this.internalHintExpander && (\n\t\t\t\t\t\t\t<div class=\"ontario-radios__hint-expander\">\n\t\t\t\t\t\t\t\t<ontario-hint-expander\n\t\t\t\t\t\t\t\t\thint={this.internalHintExpander.hint}\n\t\t\t\t\t\t\t\t\tcontent={this.internalHintExpander.content}\n\t\t\t\t\t\t\t\t\thintContentType={this.internalHintExpander.hintContentType}\n\t\t\t\t\t\t\t\t\tinput-exists\n\t\t\t\t\t\t\t\t></ontario-hint-expander>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</fieldset>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","@use 'sass:math';\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/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/breakpoints.variables' as breakpoints;\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/line-heights.variables' as lineheight;\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@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { Input } from '../../utils/common/input/input';\nimport { Language } from '../../utils/common/language-types';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport { Hint } from '../../utils/common/common.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\n\n@Component({\n\ttag: 'ontario-search-box',\n\tstyleUrl: 'ontario-search-box.scss',\n\tshadow: true,\n})\nexport class OntarioSearchBox {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/**\n\t * This Ref is used get a direct reference to the hint text element\n\t */\n\tprivate hintTextRef?: HTMLOntarioHintTextElement;\n\n\t/**\n\t * This Ref is used get a direct reference to the search input element\n\t */\n\tprivate inputFieldRef?: HTMLInputElement;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations. If none is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * The unique identifier of the search-box component. 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 value of the search term.\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * The text to display as the input label\n\t *\n\t * @example\n\t * <ontario-search-box\n\t *   caption='{\n\t *\t\t\t\"captionText\": \"Search directory\",\n\t *\t\t\t\"captionType\": \"default\"\n\t *\t\t}'\n\t *\t\trequired = \"true\"\n\t * >\n\t * </ontario-search-box>\n\t */\n\t@Prop() caption: Caption | string;\n\n\t/**\n\t * This is used to determine whether the dropdown list is required or not.\n\t * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * This Function to perform a search operation.\n\t * This function will be called when the search submit button is triggered.\n\t * The value argument is used for as search term to use for the search operation. This parameter is optional.\n\t * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.\n\t *\n\t * @example\n\t * <ontario-search-box\n\t *\t  id=\"ontario-search-box\"\n\t *\t  caption='Search directory'\n\t * ></ontario-search-box>\n\t *\n\t * <script>\n\t *\twindow.addEventListener('load', () => {\n\t *\t\tconst searchBox = document.getElementById('ontario-search-box');\n\t *\t\tsearchBox.performSearch = async (value) => {\n\t * \t\t\tconsole.log('Performing search with value:', value);\n\t *\t\t};\n\t *\t});\n\t * </script>\n\t */\n\t@Prop() performSearch?: (value?: string) => Promise<void>;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the search-box.\n\t * This is optional.\n\t */\n\t@Prop() hintText?: string | Hint;\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 * Emitted when the search is submitted.\n\t * Below is an example on how to hook into the event to get the event details.\n\t *\n\t * @example\n\t *\t<script>\n\t *\t\tdocument.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {\n\t *\t \t\tconst searchValue = event.detail;\n\t *\t\t\tconsole.log('Search submitted with value:', searchValue);\n\t *\t  };\n\t * \t</script>\n\t */\n\t@Event() searchOnSubmit: EventEmitter<string>;\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 * The hint text options are re-assigned to the internalHintText array.\n\t */\n\t@State() private internalHintText: Hint;\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 * Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\n\n\t/**\n\t * 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 `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `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 * If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId;\n\t\tthis.parseHintText();\n\t\tthis.updateCaptionState(this.caption);\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\t/**\n\t * handleSearch function is called when the search submit button is clicked\n\t */\n\tasync handleSearch(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.searchOnSubmit.emit(this.value);\n\t\tthis.performSearch && (await this.performSearch(this.value));\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string | number {\n\t\treturn this.value ?? '';\n\t}\n\n\t/**\n\t *This function ensures that the focus returns to the search input field when the reset button is clicked.\n\t */\n\tprivate setFocus(inputRef?: HTMLInputElement) {\n\t\tif (inputRef) {\n\t\t\tinputRef.focus();\n\t\t}\n\t}\n\n\t/**\n\t * when the reset button is clicked this function gets called\n\t */\n\thandleFocus = () => {\n\t\tthis.setFocus(this.inputFieldRef);\n\t};\n\n\trender() {\n\t\tconst searchInputFieldId: string = 'ontario-search-input-field';\n\t\treturn (\n\t\t\t<form\n\t\t\t\tname=\"searchForm\"\n\t\t\t\tid=\"ontario-search-form-container\"\n\t\t\t\tclass=\"ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6\"\n\t\t\t\tnovalidate\n\t\t\t>\n\t\t\t\t{this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */}\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\n\t\t\t\t<div class=\"ontario-search__input-container\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tid={searchInputFieldId}\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\t\tclassName=\"ontario-search__input ontario-input\"\n\t\t\t\t\t\trequired={true}\n\t\t\t\t\t\tref={(el) => (this.inputFieldRef = el)}\n\t\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"ontario-search__reset\"\n\t\t\t\t\t\tid=\"ontario-search-reset\"\n\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\tvalue=\"\"\n\t\t\t\t\t\tonClick={() => this.handleFocus()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"ontario-search__submit\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tid=\"ontario-search-box__submit\"\n\t\t\t\t\t\tonClick={(e) => this.handleSearch(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span innerHTML={OntarioIconSearch} />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t);\n\t}\n}\n","@use 'sass:math';\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/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/**\n* Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n*/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/**\n\t * A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t *\n\t * This is optional. If no prop is passed, it will default to `false`.\n\t */\n\t@Prop() showBackButton?: boolean = false;\n\n\t/**\n\t * URL for the back element to set a path for where the link will lead.\n\t *\n\t * If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() backButtonUrl?: string;\n\n\t/**\n\t * A number value to indicate which step the user is currently on.\n\t */\n\t@Prop() currentStep?: number;\n\n\t/**\n\t * A number value to indicate to the user the total number of steps the form has.\n\t */\n\t@Prop() numberOfSteps?: number;\n\n\t/**\n\t * A number value to indicate to the user the percentage of the form that has been completed.\n\t */\n\n\t@Prop() percentageComplete?: number;\n\n\t/**\n\t * Used to add a custom function to the back button onClick event.\n\t *\n\t * If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t */\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\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 none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\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@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span>&nbsp;%</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]}&nbsp;{this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]}&nbsp;{this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","export const minimumGridColumns = 1;\nexport const maximumGridColumns = 12;\n","import { TableColumnOptions, TableRowOptions } from '../table.interface';\n\nimport { ConsoleMessageClass } from '../../../utils/console-message/console-message';\nimport { ConsoleType } from '../../../utils/console-message/console-message.enum';\nimport { minimumGridColumns, maximumGridColumns } from '../../../utils/common/common.variables';\n\nexport function validateTableColumns(columns: TableColumnOptions[]): boolean {\n\tfor (const column of columns) {\n\t\tif (!column.title || !column.key) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The required keys for ')\n\t\t\t\t.addMonospaceText('title')\n\t\t\t\t.addRegularText(' and/or ')\n\t\t\t\t.addMonospaceText('key')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options were not provided. ')\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\treturn false; // Required keys are missing\n\t\t}\n\n\t\tif (column.type && column.type !== 'string' && column.type !== 'numeric') {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The ')\n\t\t\t\t.addMonospaceText('type')\n\t\t\t\t.addRegularText(' key in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options is not a valid type. A default type of `string` will be applied.')\n\t\t\t\t.printMessage();\n\t\t\treturn false; // Invalid type for 'type' key\n\t\t}\n\n\t\tif (column.colSpan && !(column.colSpan >= minimumGridColumns && column.colSpan <= maximumGridColumns)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The ')\n\t\t\t\t.addMonospaceText('colSpan')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableColumns')\n\t\t\t\t.addRegularText(' options is not a valid type. The default colSpan value will be applied.')\n\t\t\t\t.printMessage();\n\t\t\treturn false; // Invalid value for 'colSpan' key\n\t\t}\n\t}\n\n\treturn true; // All validations passed\n}\n\nexport function validateTableRowOptions(options: TableRowOptions[]): boolean {\n\tfor (const option of options) {\n\t\tif (!option.data || Object.keys(option.data).length === 0) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' The required key for ')\n\t\t\t\t.addMonospaceText('data')\n\t\t\t\t.addRegularText(' in the ')\n\t\t\t\t.addMonospaceText('<ontario-table> tableData')\n\t\t\t\t.addRegularText(' options was not provided. ')\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t\treturn false; // Required key 'data' is missing\n\t\t}\n\t}\n\n\treturn true; // All validations passed\n}\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/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\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/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/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n\n$ontario-table-caption-background: #0000001a;\n$ontario-table-total: #0077a056;\n$ontario-table-subtotal: #007b9e1d;\n$ontario-table-highlight: #e191003c;\n$ontario-table-row-divider: #0000004d;\n$ontario-table-zebra-striping: #0000000d;\n$ontario-table-shadow--cover: rgba(255, 255, 255, 0);\n$ontario-table-shadow--black: rgba(0, 0, 0, 0.2);\n$ontario-table-shadow--clear: rgba(252, 0, 0, 0);\n\n$ontario-table-scroller--height: 20px;\n\n$ontario-table-caption-custom-spacing: spacing.$spacing-4 + math.div(spacing.$spacing-1, 2);\n\n.ontario-table-container {\n\tposition: relative;\n\tmargin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-7;\n}\n\n.ontario-table-div {\n\tbackground:\n\t\tlinear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),\n\t\tlinear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,\n\t\tlinear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),\n\t\tlinear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);\n\tbackground-repeat: no-repeat;\n\tbackground-size:\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(40) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%,\n\t\tglobalFunctions.px-to-rem(14) 100%;\n\tbackground-position:\n\t\t0 0,\n\t\t100%,\n\t\t0 0,\n\t\t100%;\n\tbackground-attachment: local, local, scroll, scroll;\n\toverflow-x: auto;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\toverflow-x: scroll;\n\t}\n}\n\n.ontario-table-scroll--wrapper {\n\theight: $ontario-table-scroller--height;\n\toverflow-x: auto;\n\toverflow-y: hidden;\n\tdisplay: block;\n}\n\n.ontario-table-container table {\n\tborder-collapse: collapse;\n\tdisplay: table;\n\tfont-size: globalFunctions.px-to-rem(17);\n\tfont-weight: fontWeights.$ontario-font-weights-normal;\n\tline-height: globalFunctions.px-to-rem(26);\n\n\t&.ontario-table--full-container-width {\n\t\tdisplay: table;\n\t\twidth: 100%;\n\t}\n\n\t&.ontario-table--zebra-stripes-enabled {\n\t\ttbody {\n\t\t\ttr:nth-child(even) {\n\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t}\n\t\t}\n\t}\n\n\t&:not(.ontario-table--no-zebra-stripes) {\n\t\ttbody {\n\t\t\ttr:first-child:nth-last-child(n + 6),\n\t\t\ttr:first-child:nth-last-child(n + 6) ~ tr {\n\t\t\t\t&:nth-child(even) {\n\t\t\t\t\tbackground-color: $ontario-table-zebra-striping;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t}\n}\n\n.ontario-table-container caption {\n\tbackground-color: $ontario-table-caption-background;\n\tdisplay: table-caption;\n\tfont-size: globalFunctions.px-to-rem(22);\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\tline-height: globalFunctions.px-to-rem(35);\n\tpadding: $ontario-table-caption-custom-spacing spacing.$spacing-4 $ontario-table-caption-custom-spacing\n\t\tspacing.$spacing-5;\n\ttext-align: left;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tline-height: globalFunctions.px-to-rem(30);\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table thead {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tborder-color: colours.$ontario-colour-black;\n\tvertical-align: text-top;\n\n\tth {\n\t\tfont-size: globalFunctions.px-to-rem(18);\n\t\tline-height: lineHeights.$ontario-line-height-7;\n\t\tmargin: spacing.$spacing-0;\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-4 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-5;\n\t\ttext-align: left;\n\t\ttext-size-adjust: none;\n\t\t-webkit-text-size-adjust: none;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t\tline-height: globalFunctions.px-to-rem(21);\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-4;\n\t\t}\n\t}\n\n\tth.ontario-table-cell--numeric {\n\t\tpadding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-5 (spacing.$spacing-5 + spacing.$spacing-1)\n\t\t\tspacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tpadding: spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-table-container table tbody {\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tvertical-align: text-top;\n\n\ttr {\n\t\tborder: solid;\n\t\tborder-width: globalFunctions.px-to-rem(1) 0;\n\t\tborder-color: $ontario-table-row-divider;\n\t}\n\n\ttr:last-child {\n\t\tborder-width: globalFunctions.px-to-rem(3) 0;\n\t\tborder-top-width: 0;\n\t\tborder-color: colours.$ontario-colour-black;\n\t}\n\n\ttr.ontario-table-row--highlight {\n\t\tbackground-color: $ontario-table-highlight !important; // the important flag is needed to override zebra stripe background colour classes\n\n\t\tth {\n\t\t\tpadding-left: spacing.$spacing-5;\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\n\t\t\timg.ontario-table--highlight-indicator {\n\t\t\t\t// Width of yellow triangle svg\n\t\t\t\twidth: globalFunctions.px-to-rem(8);\n\t\t\t\tposition: absolute;\n\t\t\t\t// Distance from top of svg to top of container\n\t\t\t\ttop: globalFunctions.px-to-rem(24);\n\t\t\t\tleft: 0;\n\t\t\t}\n\t\t}\n\t}\n\n\ttr.ontario-table-row--subtotal {\n\t\tbackground-color: $ontario-table-subtotal !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th,\n.ontario-table-container table td {\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-4 globalFunctions.px-to-rem(19) spacing.$spacing-5;\n\ttext-align: left;\n\tletter-spacing: globalFunctions.px-to-rem(0.4);\n}\n\n.ontario-table-container tbody th,\n.ontario-table-container tfoot th {\n\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\tline-height: globalFunctions.px-to-rem(26);\n\t\tpadding-right: spacing.$spacing-2;\n\t\tpadding-left: spacing.$spacing-4;\n\t}\n}\n\n.ontario-table-container table td {\n\timg {\n\t\tvertical-align: top;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmax-width: none;\n\t\t}\n\t}\n\n\t&.ontario-table-cell--numeric {\n\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-5 globalFunctions.px-to-rem(19) spacing.$spacing-4;\n\t\ttext-align: right;\n\n\t\tstrong {\n\t\t\tfont-family: fonts.$ontario-font-courier-prime;\n\t\t}\n\t}\n}\n\n.ontario-table-container tbody tr.ontario-table-row--subtotal,\n.ontario-table-container tfoot tr {\n\tborder: solid;\n\tborder-width: globalFunctions.px-to-rem(3) 0;\n\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\tborder-color: colours.$ontario-colour-black;\n\n\tth {\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n\n\ttd {\n\t\tfont-weight: fontWeights.$ontario-font-weights-bold;\n\t\tpadding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;\n\t}\n}\n\n.ontario-table-container tfoot {\n\tvertical-align: text-top;\n\n\ttr {\n\t\tbackground-color: $ontario-table-total !important; // the important flag is needed to override zebra stripe background colour classes\n\t}\n}\n\n// Column classes\n.ontario-table-header--column-span-1 {\n\t//Equivalent to 1 grid columns\n\tmin-width: 8.33333vw;\n}\n\n.ontario-table-header--column-span-2 {\n\t//Equivalent to 2 grid columns\n\tmin-width: 16.66666vw;\n}\n\n.ontario-table-header--column-span-3 {\n\t//Equivalent to 3 grid columns\n\tmin-width: 25vw;\n}\n\n.ontario-table-header--column-span-4 {\n\t//Equivalent to 4 grid columns\n\tmin-width: 33.33333vw;\n}\n\n.ontario-table-header--column-span-5 {\n\t//Equivalent to 5 grid columns\n\tmin-width: 41.66666vw;\n}\n\n.ontario-table-header--column-span-6 {\n\t//Equivalent to 6 grid columns\n\tmin-width: 50vw;\n}\n\n.ontario-table-header--column-span-7 {\n\t//Equivalent to 7 grid columns\n\tmin-width: 58.33333vw;\n}\n\n.ontario-table-header--column-span-8 {\n\t//Equivalent to 8 grid columns\n\tmin-width: 66.66666vw;\n}\n\n.ontario-table-header--column-span-9 {\n\t//Equivalent to 9 grid columns\n\tmin-width: 75vw;\n}\n\n.ontario-table-header--column-span-10 {\n\t//Equivalent to 10 grid columns\n\tmin-width: 83.33333vw;\n}\n\n.ontario-table-header--column-span-11 {\n\t//Equivalent to 11 grid columns\n\tmin-width: 91.66666vw;\n}\n\n.ontario-table-header--column-span-12 {\n\t//Equivalent to 12 grid columns\n\tmin-width: 100vw;\n}\n\n// Condensed tables\n.ontario-table-container .ontario-table--condensed {\n\ttd {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t\ttext-align: left;\n\t}\n\n\ttd.ontario-table-cell--numeric {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-5 spacing.$spacing-3 spacing.$spacing-4;\n\t\tfont-size: globalFunctions.px-to-rem(17);\n\t\ttext-align: right;\n\t}\n\n\ttbody th,\n\ttfoot th {\n\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;\n\t}\n\n\ttr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {\n\t\ttop: globalFunctions.px-to-rem(17);\n\t}\n\n\ttr.ontario-table-row--subtotal,\n\ttfoot tr {\n\t\tth,\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-5;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\ttext-align: right;\n\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-4;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\ttd {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t\tfont-size: fontSizes.$ontario-font-size-standard-body-text;\n\t\t}\n\n\t\ttd.ontario-table-cell--numeric {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-2;\n\t\t}\n\n\t\ttbody th {\n\t\t\tpadding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;\n\t\t}\n\n\t\ttr.ontario-table-row--subtotal,\n\t\ttfoot tr {\n\t\t\tth,\n\t\t\ttd {\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-4;\n\t\t\t}\n\n\t\t\ttd.ontario-table-cell--numeric {\n\t\t\t\ttext-align: right;\n\t\t\t\tpadding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-2;\n\t\t\t}\n\t\t}\n\t}\n}\n","import { Component, h, Element, Prop, State, Watch, getAssetPath } from '@stencil/core';\n\nimport { Table, TableColumnOptions, TableRowOptions } from './table.interface';\n\nimport { validateTableColumns, validateTableRowOptions } from './utils/ontario-table-validation';\n\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { ConsoleType } from '../../utils/console-message/console-message.enum';\nimport { extractValuesByKey, organizeObjectKeys, removeObjectsBySpecificKey } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-table',\n\tstyleUrl: 'ontario-table.scss',\n\tshadow: true,\n\tassetsDirs: ['./assets'],\n})\nexport class OntarioTable implements Table {\n\t@Element() element: HTMLElement;\n\tprivate tableScrollWrapper: HTMLElement;\n\tprivate tableScrollDiv: HTMLElement;\n\tprivate table: HTMLElement;\n\n\t/**\n\t * Specifies the caption (or title) of the table.\n\t *\n\t * This is optional.\n\t */\n\t@Prop() caption?: string | undefined;\n\n\t/**\n\t * Used to define the columns of the table.\n\t *\n\t * @example;\n\t * <ontario-table\n\t *    table-columns='[\n\t *      { \"title\": \"Type of service\", \"key\": \"service\" },\n\t *      { \"title\": \"Processing and delivery\", \"key\": \"processing\" },\n\t *      { \"title\": \"Cost\", \"key\": \"cost\", \"type\": \"numeric\" }\n\t *    ]'\n\t * >\n\t * </ontario-table>\n\t */\n\t@Prop() tableColumns: string | TableColumnOptions[];\n\n\t/**\n\t * Used to define the table body data. Note that the keys passed to the `data` object in the tableData should match the keys of the columns defined in the tableColumns prop.\n\t *\n\t * @example\n\t * <ontario-table\n\t *  table-data='[\n\t *    {\n\t *      \"data\": {\n\t *        \"service\": \"Regular service (online)\",\n\t *        \"processing\": \"15 business days plus delivery by Canada Post\",\n\t *        \"cost\": \"$15\"\n\t *      }\n\t *    },\n\t *    {\n\t *      \"data\": {\n\t *        \"service\": \"Premium service (online)\",\n\t *        \"cost\": \"$45\",\n\t *        \"processing\": \"5 business days including delivery by courier\"\n\t *      }\n\t *    }\n\t *  ]'\n\t * >\n\t * </ontario-table>\n\t */\n\t@Prop() tableData: string | TableRowOptions[];\n\n\t/**\n\t * Indicates whether or not the table data should have alternate row zebra striping.\n\t *\n\t * This is optional. By default, zebra striping will be added when the table rows extend 5 rows. If zebra striping is needed to table rows less than 5 rows, the prop should be set to “enabled”. If no zebra stripes are needed, it should be set to “disabled”.\n\t *\n\t * The default will be set to “auto”.\n\t */\n\t@Prop() zebraStripes?: 'auto' | 'disabled' | 'enabled' | undefined = 'auto';\n\n\t/**\n\t * Used to specify whether or not table data in cells should have reduced top and bottom padding. This is useful for pages with multiple data-heavy tables such as a budget or financial data.\n\t *\n\t * This is optional. By default it will be set to “false”.\n\t */\n\t@Prop() condensed?: boolean | undefined = false;\n\n\t/**\n\t * Used to specify whether or not the table should extend the full width of its container.\n\t *\n\t * This is optional. By default, it will be set to “false”\n\t */\n\t@Prop() fullWidth?: boolean | undefined = false;\n\n\t@State() private tableColumnsState: TableColumnOptions[];\n\n\t@State() private tableDataState: TableRowOptions[];\n\n\t@State() private tableFooterState: TableRowOptions[];\n\n\t@Watch('tableColumns')\n\tprivate processTableColumns() {\n\t\tthis.tableColumns && this.parseOptions(this.tableColumns);\n\t\tvalidateTableColumns(this.tableColumnsState);\n\t}\n\n\t@Watch('tableData')\n\tprivate processTableData() {\n\t\tthis.tableData && this.parseOptions(this.tableData);\n\t\tvalidateTableRowOptions(this.tableDataState);\n\t}\n\n\t// Parse the tableColumn & tableData options if they are strings\n\t// Transforms the data and stores it in respective state objects\n\tprivate parseOptions(options: any) {\n\t\tconst isString = typeof options === 'string';\n\n\t\tif (!options) {\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tif (options === this.tableColumns) {\n\t\t\t\tthis.tableColumnsState = isString ? JSON.parse(options) : options;\n\t\t\t} else {\n\t\t\t\tthis.tableDataState = isString ? JSON.parse(options) : options;\n\t\t\t\tthis.transformTableData(this.tableDataState);\n\t\t\t}\n\t\t} catch (error) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addRegularText(' failed to parse props for ')\n\t\t\t\t.addMonospaceText('<ontario-table>')\n\t\t\t\t.addRegularText(' in ')\n\t\t\t\t.addMonospaceText('parseOptions()')\n\t\t\t\t.addRegularText(' method \\n ')\n\t\t\t\t.addMonospaceText(error.stack)\n\t\t\t\t.printMessage(ConsoleType.Error);\n\t\t}\n\t}\n\n\tprivate transformTableData = (tableData: TableRowOptions[]) => {\n\t\t// get column keys\n\t\tconst columns = extractValuesByKey<TableColumnOptions>(this.tableColumnsState, 'key').filter(\n\t\t\t(column): column is keyof TableRowOptions => column !== undefined,\n\t\t);\n\n\t\t// organize table data data object according to the order of the column keys\n\t\tconst organizedTableData = organizeObjectKeys(tableData, columns);\n\n\t\t// remove the footer table data into it's own state so that it can be rendered in a `tfoot` element\n\t\tconst [updatedTableData, tableFooterData] = removeObjectsBySpecificKey(organizedTableData, 'footer', true);\n\n\t\tthis.tableDataState = updatedTableData;\n\t\tthis.tableFooterState = tableFooterData;\n\t};\n\n\tprivate getZebraStripeClass = () => {\n\t\treturn this.zebraStripes === 'disabled'\n\t\t\t? `ontario-table--no-zebra-stripes`\n\t\t\t: this.zebraStripes === 'enabled'\n\t\t\t\t? `ontario-table--zebra-stripes-enabled`\n\t\t\t\t: ``;\n\t};\n\n\tprivate getTableClasses = () => {\n\t\tlet tableClass = '';\n\t\tif (this.condensed && this.fullWidth) {\n\t\t\ttableClass = `ontario-table--condensed ontario-table--full-container-width`;\n\t\t} else if (this.condensed) {\n\t\t\ttableClass = `ontario-table--condensed`;\n\t\t} else if (this.fullWidth) {\n\t\t\ttableClass = `ontario-table--full-container-width`;\n\t\t}\n\n\t\tconst zebraStripesClass = this.getZebraStripeClass();\n\t\tif (tableClass) {\n\t\t\ttableClass = `${tableClass} ${zebraStripesClass}`;\n\t\t} else {\n\t\t\ttableClass = zebraStripesClass;\n\t\t}\n\n\t\treturn tableClass;\n\t};\n\n\tprivate getColumnClasses = (columnData: TableColumnOptions) => {\n\t\tif (columnData.type === 'numeric' && columnData.colSpan) {\n\t\t\treturn `ontario-table-cell--numeric ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t} else if (columnData.type === 'numeric') {\n\t\t\treturn `ontario-table-cell--numeric`;\n\t\t} else if (columnData.colSpan) {\n\t\t\treturn `ontario-table-header--column-span-${columnData.colSpan}`;\n\t\t}\n\n\t\treturn;\n\t};\n\n\t// A function used to generate the table header and table definitions for the table body and table footer sections.\n\tprivate generateTableDataHTML = (\n\t\tdataType: 'tableData' | 'tableFooter',\n\t\trowData: any,\n\t\tcolumns: (string | number | undefined)[],\n\t\trowClass?: string | undefined,\n\t) => {\n\t\treturn (\n\t\t\t<tr class={dataType === 'tableData' ? rowClass : ''}>\n\t\t\t\t{this.tableColumnsState.map((column, index) => {\n\t\t\t\t\tconst type = column.type;\n\t\t\t\t\tconst tdClass = type === 'numeric' ? `ontario-table-cell--numeric` : '';\n\n\t\t\t\t\treturn index === 0 ? (\n\t\t\t\t\t\t<th scope=\"row\" innerHTML={rowData.data[`${columns[0]}`]}>\n\t\t\t\t\t\t\t{dataType === 'tableData' && rowData.highlight && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tclass=\"ontario-table--highlight-indicator\"\n\t\t\t\t\t\t\t\t\tsrc={getAssetPath('./assets/highlight-indicator.svg')}\n\t\t\t\t\t\t\t\t></img>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</th>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<td class={tdClass} innerHTML={rowData.data[`${columns[index]}`]}></td>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</tr>\n\t\t);\n\t};\n\n\t// Helper function to apply the scrollbar styles to the tops of tables\n\tprivate applyScrollbar(tableElement: Element, scrollerDiv: HTMLElement) {\n\t\tscrollerDiv.style.visibility = 'visible';\n\t\tscrollerDiv.style.height = '20px';\n\t\tscrollerDiv.style.width = `${tableElement.scrollWidth}px`;\n\t}\n\n\t// The following logic adds scrollbar functionality to the tops of tables depending on their size.\n\tcomponentDidLoad() {\n\t\tconst tables = this.table;\n\t\tconst scrollerDivs = this.tableScrollDiv;\n\t\tconst scrollerWrappers = this.tableScrollWrapper;\n\n\t\tlet resizeObserver = new ResizeObserver(() => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\t});\n\n\t\tthis.applyScrollbar(tables, scrollerDivs);\n\t\tresizeObserver.observe(tables);\n\n\t\ttables.addEventListener('scroll', () => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\tscrollerWrappers.scrollLeft = tables.scrollLeft;\n\t\t});\n\n\t\tscrollerWrappers.addEventListener('scroll', () => {\n\t\t\tthis.applyScrollbar(tables, scrollerDivs);\n\n\t\t\ttables.scrollLeft = scrollerWrappers.scrollLeft;\n\t\t});\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.processTableColumns();\n\t\tthis.processTableData();\n\t}\n\n\trender() {\n\t\tconst columns = extractValuesByKey(this.tableColumnsState, 'key');\n\n\t\treturn (\n\t\t\t<div class=\"ontario-table-container\">\n\t\t\t\t<div class=\"ontario-table-scroll--wrapper\" ref={(el) => (this.tableScrollWrapper = el as HTMLElement)}>\n\t\t\t\t\t<div class=\"ontario-table-scroll--div\" ref={(el) => (this.tableScrollDiv = el as HTMLElement)}></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"ontario-table-div\" ref={(el) => (this.table = el as HTMLElement)}>\n\t\t\t\t\t<table class={this.getTableClasses()}>\n\t\t\t\t\t\t{this.caption && <caption>{this.caption}</caption>}\n\t\t\t\t\t\t{this.tableColumnsState && (\n\t\t\t\t\t\t\t<thead>\n\t\t\t\t\t\t\t\t<tr>\n\t\t\t\t\t\t\t\t\t{this.tableColumnsState.map((columnData) => {\n\t\t\t\t\t\t\t\t\t\tconst columnClass = this.getColumnClasses(columnData);\n\t\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t\t<th\n\t\t\t\t\t\t\t\t\t\t\t\tscope=\"col\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={columnData.key}\n\t\t\t\t\t\t\t\t\t\t\t\tdata-type={columnData.type}\n\t\t\t\t\t\t\t\t\t\t\t\tclass={columnClass}\n\t\t\t\t\t\t\t\t\t\t\t\tinnerHTML={columnData.title}\n\t\t\t\t\t\t\t\t\t\t\t></th>\n\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t</tr>\n\t\t\t\t\t\t\t</thead>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{this.tableDataState && (\n\t\t\t\t\t\t\t<tbody>\n\t\t\t\t\t\t\t\t{this.tableDataState.map((rowData) => {\n\t\t\t\t\t\t\t\t\tconst rowClass = rowData.highlight\n\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--highlight`\n\t\t\t\t\t\t\t\t\t\t: rowData.subtotal\n\t\t\t\t\t\t\t\t\t\t\t? `ontario-table-row--subtotal`\n\t\t\t\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', rowData, columns, rowClass);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tbody>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{!!this.tableFooterState.length && (\n\t\t\t\t\t\t\t<tfoot>\n\t\t\t\t\t\t\t\t{this.tableFooterState.map((footerData) => {\n\t\t\t\t\t\t\t\t\treturn this.generateTableDataHTML('tableData', footerData, columns, undefined);\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</tfoot>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</table>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n","// Define an enum for task statuses\nexport enum TaskStatuses {\n\tNotStarted = 'notStarted',\n\tInProgress = 'inProgress',\n\tCompleted = 'completed',\n\tCannotStartYet = 'cannotStartYet',\n\tError = 'error',\n\tOptional = 'optional',\n}\n\n// Map task statuses to badge colours\nexport const TaskToBadgeColour = {\n\t[TaskStatuses.NotStarted]: 'lightTeal',\n\t[TaskStatuses.InProgress]: 'teal',\n\t[TaskStatuses.Completed]: 'white',\n\t[TaskStatuses.CannotStartYet]: 'darkGrey',\n\t[TaskStatuses.Error]: 'red',\n\t[TaskStatuses.Optional]: 'grey',\n} as const;\n\n// Define the type for task statuses\nexport type TaskStatus = keyof typeof TaskStatuses;\n\n// Define the type for badge colours\nexport type TaskBadgeColour = (typeof TaskToBadgeColour)[TaskStatuses];\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/colours.variables' as colours;\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/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n\n.ontario-task {\n\tborder-bottom: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: globalFunctions.px-to-rem(19) spacing.$spacing-0;\n\tlist-style: none;\n\n\t&__content {\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\talign-items: flex-start;\n\t\t}\n\t}\n\n\t&__label {\n\t\ttext-align: left;\n\t\tmargin: spacing.$spacing-0;\n\t\tfont-size: globalFunctions.px-to-rem(19);\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\tdisplay: inline-block;\n\n\t\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t\tcolor: inherit;\n\n\t\t\t&:hover {\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__link {\n\t\tdisplay: block;\n\t\ttext-decoration: underline;\n\t\tcolor: colours.$ontario-colour-link;\n\t\tfont-weight: normal;\n\t}\n\n\t&__hint-text--true {\n\t\tmargin-bottom: spacing.$spacing-2;\n\t}\n}\n\n.ontario-task__link:focus {\n\toutline: none;\n\tbox-shadow: none;\n\n\t.ontario-task__label {\n\t\t@extend %ontario-focus;\n\t\tbox-shadow: 0 0 0 4px colours.$ontario-colour-focus inset;\n\t}\n}\n\n.ontario-task:has(.ontario-task__link) {\n\t&:hover {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n}\n\n@mixin link-states {\n\t&:visited .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--visited;\n\t}\n\t&:hover .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--hover;\n\t}\n\t&:active .ontario-task__label {\n\t\tcolor: colours.$ontario-colour-link--active;\n\t}\n}\n\n.ontario-task {\n\t&--status-completed,\n\t&--status-inprogress,\n\t&--status-notstarted,\n\t&--status-optional,\n\t&--status-error {\n\t\t.ontario-task__link {\n\t\t\t.ontario-task__label {\n\t\t\t\tcolor: colours.$ontario-colour-link;\n\t\t\t\ttext-decoration: underline;\n\t\t\t}\n\t\t\t@include link-states;\n\t\t}\n\t}\n}\n\nontario-hint-text::part(hint-text) {\n\tmargin: spacing.$spacing-0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-top: spacing.$spacing-2;\n\t}\n}\n","import { h, Component, Prop, Watch, State, Listen, Element, Fragment } from '@stencil/core';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { TaskStatuses, TaskBadgeColour, TaskToBadgeColour } from '../../utils/common/task-statuses.enum';\nimport { validateLanguage, validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { Hint } from '../../utils/common/common.interface';\nimport { Language } from '../../utils/common/language-types';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nexport type TaskHeadingLevel = Extract<HeadingLevel, 'h2' | 'h3' | 'h4'>;\n\n@Component({\n\ttag: 'ontario-task',\n\tstyleUrl: 'ontario-task.scss',\n\tshadow: true,\n})\nexport class OntarioTask {\n\t@Element() el: HTMLElement;\n\n\t// Reference to the ontario-hint-text element for this task.\n\thintTextRef?: HTMLOntarioHintTextElement | undefined;\n\n\t/**\n\t * Specifies the label of the task.\n\t *\n\t * This is required to provide the name of the task.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * A unique id for the task.\n\t *\n\t * This is required.\n\t */\n\t@Prop() taskId: string;\n\n\t/**\n\t * Specifies an optional link associated with the task.\n\t *\n\t * If provided, clicking the task will navigate to this URL.\n\t */\n\t@Prop() link?: string;\n\n\t/**\n\t * Disables the task link when set to `true`.\n\t *\n\t * Default is `false`, meaning the link will be active if provided.\n\t */\n\t@Prop() deactivateLink: boolean = false;\n\n\t/**\n\t * The language of the component.\n\t *\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the task.\n\t *\n\t * This is optional.\n\t */\n\t@Prop({ mutable: true }) hintText?: string | Hint;\n\n\t/**\n\t * Defines the status of the task, with default set to 'NotStarted'.\n\t *\n\t * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`.\n\t */\n\t/**\n\t * Defines the status of the task, with default set to 'NotStarted'.\n\t *\n\t * Accepts values from `TaskStatuses` enum: `NotStarted`, `InProgress`, `Completed`, etc.\n\t */\n\t@Prop() taskStatus: TaskStatuses = TaskStatuses.NotStarted;\n\n\t/**\n\t * Allows consumers to define the heading level for the task label.\n\t *\n\t * Accepts 'h2', 'h3' or 'h4'. Default is 'h3'.\n\t */\n\t@Prop() headingLevel: TaskHeadingLevel = 'h3';\n\n\t/**\n\t * The hint text options are re-assigned to the internalHintText state.\n\t */\n\t@State() private internalHintText: Hint;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t *\n\t * Set the task's status state depending on validation result.\n\t */\n\t@State() private taskStatusState: TaskStatuses = TaskStatuses.NotStarted;\n\t/**\n\t * Watch for changes in `taskStatus` prop to validate its value.\n\t */\n\t@Watch('taskStatus')\n\tvalidateTaskStatus() {\n\t\tconst validStatuses = Object.values(TaskStatuses);\n\t\tconst isValidStatus = validStatuses.includes(this.taskStatus);\n\t\tthis.taskStatusState = isValidStatus ? this.taskStatus : this.warnAndGetDefaultTaskStatus();\n\n\t\t// Update the `data-task-status` attribute\n\t\tthis.el.setAttribute('data-task-status', this.taskStatusState);\n\t}\n\n\t/**\n\t * Logs a warning to the console if the `taskStatus` prop is set to an invalid value.\n\t *\n\t * This function informs developers that the provided `taskStatus` is not recognized\n\t * and resets the status to the default value of `'notStarted'`. The warning message\n\t * specifies the valid task statuses to help guide correct usage.\n\t *\n\t * @returns The default task status `'notStarted'`.\n\t */\n\tprivate warnAndGetDefaultTaskStatus(): TaskStatuses {\n\t\tconst validStatuses = Object.values(TaskStatuses).join(', ');\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' taskStatus ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t.addRegularText('was set to an invalid taskStatus; only ')\n\t\t\t.addMonospaceText(validStatuses)\n\t\t\t.addRegularText(' are supported. The default taskStatus ')\n\t\t\t.addMonospaceText(TaskStatuses.NotStarted)\n\t\t\t.addRegularText(' is assumed.')\n\t\t\t.printMessage();\n\t\treturn TaskStatuses.NotStarted;\n\t}\n\n\t/**\n\t * Watch for changes in `headingLevel` prop to validate its value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskHeadingLevel[] = ['h2', 'h3', 'h4'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h3')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h3';\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes in `hintText` prop and parse it if available.\n\t *\n\t * If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format,\n\t * and the result will be stored in 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 * Listen for app language settings on the window to update the component language.\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/**\n\t * This listens for the `headerLanguageToggled` event sent from the language toggle when it is connected to the DOM.\n\t * It is used for changing the component language after the language toggle has been activated.\n\t */\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t/**\n\t * Determines the badge colour based on the current `taskStatusState`.\n\t *\n\t * @returns {TaskBadgeColour}\n\t */\n\tprivate getBadgeColour(): TaskBadgeColour {\n\t\treturn TaskToBadgeColour[this.taskStatusState] || 'grey';\n\t}\n\n\t/**\n\t * Provides a translated task status string based on the current language.\n\t */\n\tprivate getTranslatedTaskStatus(): string {\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\t\treturn translations.taskStatus[this.taskStatusState][resolvedLanguage];\n\t}\n\n\t/**\n\t * Renders hint text if available.\n\t */\n\tprivate renderHintText() {\n\t\tif (this.internalHintText) {\n\t\t\treturn (\n\t\t\t\t<ontario-hint-text\n\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t></ontario-hint-text>\n\t\t\t);\n\t\t}\n\t\treturn null;\n\t}\n\n\t/**\n\t * Returns the class name(s) for the task label.\n\t */\n\tprivate getClass(): string {\n\t\treturn ['ontario-task__label', this.hintText && 'ontario-task__hint-text--true'].filter(Boolean).join(' ');\n\t}\n\n\t/**\n\t * Renders the task label and status content.\n\t *\n\t * This includes dynamically rendering the heading element (h2, h3, or h4) based on the `headingLevel` prop,\n\t * as well as the badge indicating the task status.\n\t */\n\tprivate renderTaskContent() {\n\t\tconst headingProps: any = {\n\t\t\tid: `task-label--${this.taskId}`,\n\t\t\tclass: this.getClass(),\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task__content\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\t\t\t\t{this.taskStatusState && (\n\t\t\t\t\t<ontario-badge\n\t\t\t\t\t\tclass=\"ontario-task__badge\"\n\t\t\t\t\t\trole=\"status\"\n\t\t\t\t\t\taria-label={`${\n\t\t\t\t\t\t\ttranslations.taskStatus.taskStatus[validateLanguage(this.language)]\n\t\t\t\t\t\t} ${this.getTranslatedTaskStatus()} (${this.taskStatusState})`}\n\t\t\t\t\t\tcolour={this.getBadgeColour()}\n\t\t\t\t\t>\n\t\t\t\t\t\t{this.getTranslatedTaskStatus()}\n\t\t\t\t\t</ontario-badge>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t/**\n\t * After the component loads, retrieve the hint text ID (if available) from the hintText component,\n\t * and set it for the `aria-describedby` attribute.\n\t */\n\tasync componentDidLoad() {\n\t\tif (this.hintTextRef) {\n\t\t\tlet hintTextId = this.hintTextRef.elementId;\n\n\t\t\tif (!hintTextId) {\n\t\t\t\thintTextId = `hint-text--${this.taskId}`;\n\t\t\t\tthis.hintTextRef.elementId = hintTextId;\n\t\t\t}\n\n\t\t\tconst taskElement = this.el.shadowRoot?.querySelector('li');\n\t\t\tif (taskElement) {\n\t\t\t\ttaskElement.setAttribute('aria-describedby', hintTextId);\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Lifecycle method: before the component loads, parse the hint text and\n\t * validate language and task status and heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.parseHintText();\n\t\tthis.language = validateLanguage(this.language);\n\t\tthis.validateTaskStatus();\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\trender() {\n\t\tconst isLinkActive = this.link && !this.deactivateLink;\n\t\tconst taskStatusClass = `ontario-task-status--${this.taskStatusState.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}`;\n\n\t\tconst taskContent = (\n\t\t\t<Fragment>\n\t\t\t\t{this.renderTaskContent()}\n\t\t\t\t{this.renderHintText()}\n\t\t\t</Fragment>\n\t\t);\n\n\t\treturn (\n\t\t\t<li\n\t\t\t\tclass={`ontario-task ${taskStatusClass}`}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-labelledby={`task-label--${this.taskId}`}\n\t\t\t\tdata-task-status={this.taskStatusState}\n\t\t\t>\n\t\t\t\t{isLinkActive ? (\n\t\t\t\t\t<a href={this.link} class=\"ontario-task__link\" aria-label={this.label}>\n\t\t\t\t\t\t{taskContent}\n\t\t\t\t\t</a>\n\t\t\t\t) : (\n\t\t\t\t\t<div>{taskContent}</div>\n\t\t\t\t)}\n\t\t\t</li>\n\t\t);\n\t}\n}\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/2-tools/functions/global.functions' as globalFunctions;\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/spacing.variables' as spacing;\n\n.ontario-task-list {\n\tborder-top: globalFunctions.px-to-rem(2) solid colours.$ontario-greyscale-20;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-task-list__item {\n\tmax-width: globalVariables.$full-width;\n\tlist-style-type: none;\n}\n","import { h, Component, Element, Prop, State, Watch } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\nimport { HeadingLevel } from '../../utils/common/common.interface';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { TaskStatuses } from '../../utils/common/task-statuses.enum';\nexport type TaskListHeadingLevel = 'h1' | Exclude<HeadingLevel, 'h6'>;\n\n@Component({\n\ttag: 'ontario-task-list',\n\tstyleUrl: 'ontario-task-list.scss',\n\tshadow: true,\n})\nexport class OntarioTaskList {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The label prop used for the task list heading.\n\t */\n\t@Prop() label: string;\n\n\t/**\n\t * Allows consumers to define the heading level for the task list component.\n\t *\n\t * Accepts 'h1', 'h2', 'h3' or 'h4'. Default is 'h2'.\n\t */\n\t@Prop() headingLevel: TaskListHeadingLevel = 'h2';\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 none are passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/**\n\t * State to track the number of completed tasks.\n\t */\n\t@State() completedTasks: number = 0;\n\n\t/**\n\t * State to track the total number of tasks.\n\t */\n\t@State() totalTasks: number = 0;\n\n\t/**\n\t * Class-level constant for task count delay in milliseconds.\n\t *\n\t * This delay ensures that the `ontario-task` custom elements are fully upgraded and rendered\n\t * in the DOM before the `countTasks` method is executed. Without this delay, the component\n\t * might attempt to query or count tasks before they are properly initialized, leading to\n\t * inaccurate task counts.\n\t */\n\tprivate static readonly TASK_COUNT_DELAY_MS = 50;\n\n\t/**\n\t * Watch for changes in `headingLevel` prop to validate its value.\n\t */\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel(newValue: string) {\n\t\tconst allowedValues: TaskListHeadingLevel[] = ['h1', 'h2', 'h3', 'h4', 'h5'];\n\n\t\t// Validate the new value against the allowed values\n\t\tconst isValid = validateValueAgainstArray(newValue, allowedValues);\n\n\t\tif (!isValid) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' headingLevel ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-task-list> ')\n\t\t\t\t.addRegularText('was set to an invalid value; only ')\n\t\t\t\t.addMonospaceText(allowedValues.join(', '))\n\t\t\t\t.addRegularText(' are supported. The default value ')\n\t\t\t\t.addMonospaceText('h2')\n\t\t\t\t.addRegularText(' is assumed.')\n\t\t\t\t.printMessage();\n\n\t\t\tthis.headingLevel = 'h2';\n\t\t}\n\t}\n\n\t/**\n\t * Counts the total tasks and completed tasks by querying for `ontario-task` elements.\n\t */\n\tcountTasks() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tconst tasks = slot\n\t\t\t? (slot.assignedElements().filter((el) => el.tagName.toLowerCase() === 'ontario-task') as HTMLElement[])\n\t\t\t: [];\n\n\t\tthis.totalTasks = tasks.length;\n\n\t\tthis.completedTasks = tasks.filter((task) => {\n\t\t\t// Get the status directly from the light DOM\n\t\t\tconst status = task.getAttribute('data-task-status');\n\t\t\treturn status === TaskStatuses.Completed;\n\t\t}).length;\n\t}\n\n\t/**\n\t * Lifecycle method: before the component loads, validate heading level.\n\t */\n\tasync componentWillLoad() {\n\t\tthis.validateHeadingLevel(this.headingLevel);\n\t}\n\n\t/**\n\t * Ensure tasks are counted after custom elements are fully upgraded.\n\t */\n\tconnectedCallback() {\n\t\t// Wait for the custom element to be fully defined before counting\n\t\tcustomElements.whenDefined('ontario-task').then(() => {\n\t\t\tsetTimeout(() => {\n\t\t\t\tthis.countTasks();\n\t\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t\t});\n\t}\n\n\t/**\n\t * Use slotchange and MutationObserver to track changes in slot content.\n\t */\n\tcomponentDidLoad() {\n\t\tconst slot = this.el.shadowRoot?.querySelector('slot');\n\t\tif (slot) {\n\t\t\tslot.addEventListener('slotchange', () => {\n\t\t\t\tthis.countTasks();\n\t\t\t});\n\t\t}\n\n\t\t// Observe changes to the light DOM for accurate counting\n\t\tconst observer = new MutationObserver((_mutations) => {\n\t\t\tthis.countTasks();\n\t\t});\n\t\tobserver.observe(this.el, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributes: true,\n\t\t\tattributeFilter: ['data-task-status'],\n\t\t});\n\t}\n\n\tcomponentDidRender() {\n\t\tsetTimeout(() => {\n\t\t\tthis.countTasks();\n\t\t}, OntarioTaskList.TASK_COUNT_DELAY_MS);\n\t}\n\n\trender() {\n\t\t// Resolve the language to ensure valid translations are used.\n\t\tconst resolvedLanguage = validateLanguage(this.language);\n\n\t\tconst headingProps = {\n\t\t\tclass: { 'ontario-task-list__heading': true },\n\t\t};\n\n\t\treturn (\n\t\t\t<div class=\"ontario-task-list__container\">\n\t\t\t\t{h(this.headingLevel, headingProps, this.label)}\n\n\t\t\t\t<p class=\"ontario-task-list__completion-text\" aria-live=\"polite\">\n\t\t\t\t\t{translations.taskGroup.completed[resolvedLanguage]}&nbsp;\n\t\t\t\t\t{this.completedTasks}&nbsp;\n\t\t\t\t\t{translations.taskGroup.outOf[resolvedLanguage]}&nbsp;\n\t\t\t\t\t{this.totalTasks}&nbsp;\n\t\t\t\t\t{translations.taskGroup.tasks[resolvedLanguage]}\n\t\t\t\t</p>\n\n\t\t\t\t<ul class=\"ontario-task-list\" role=\"list\">\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</ul>\n\t\t\t</div>\n\t\t);\n\t}\n}\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/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-textarea-border-width: 0.125rem;\n\n.ontario-textarea {\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\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\tdisplay: block;\n\tmax-width: globalVariables.$standard-width;\n\tmin-height: 144px;\n\tmargin: 0 0 spacing.$spacing-7;\n\tpadding: 0.625rem spacing.$spacing-4;\n\ttransition: focusPlaceholders.$ontario-focus-transition;\n\twhite-space: pre-wrap;\n\twidth: globalVariables.$full-width;\n\n\t&:focus,\n\t&:active {\n\t\t@extend %ontario-focus;\n\t}\n}\n\n.ontario-textarea.ontario-textarea-hint-expander--true {\n\tmargin-bottom: spacing.$spacing-4;\n}\n\n.ontario-textarea--error {\n\ttextarea {\n\t\tborder: $ontario-textarea-border-width solid colours.$ontario-colour-alert;\n\t}\n}\n","import { Component, Event, h, Prop, State, Listen, Watch, Element, EventEmitter, AttachInternals } from '@stencil/core';\nimport { v4 as uuid } from 'uuid';\n\nimport { HintExpander } from '../ontario-hint-expander/hint-expander.interface';\n\nimport { Hint, Input } from '../../utils/common/common.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { validatePropExists, validateLanguage } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { Language } from '../../utils/common/language-types';\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';\n\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { ErrorMessage } from '../../utils/components/error-message/error-message';\n\n@Component({\n\ttag: 'ontario-textarea',\n\tstyleUrl: 'ontario-textarea.scss',\n\tshadow: true,\n\tformAssociated: true,\n})\nexport class OntarioTextarea implements Input {\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 textarea 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 name assigned to the textarea. The name value is used to reference form data after a form is submitted.\n\t */\n\t@Prop() name: string;\n\n\t/**\n\t * The unique identifier of the textarea. 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 * This is used to determine whether the textarea is required or not.\n\t * This prop also gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t */\n\t@Prop() required?: boolean = false;\n\n\t/**\n\t * The textarea content value.\n\t */\n\t@Prop({ mutable: true }) value?: string;\n\n\t/**\n\t * Used to include the ontario-hint-text component for the textarea.\n\t * This is optional.\n\n\t */\n\t@Prop() hintText?: string | Hint;\n\n\t/**\n\t * Used to include the ontario-hint-expander component for the textarea 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-textarea\n\t *   caption='{\n\t *     \"captionText\": \"What are your thoughts\",\n\t *     \"captionType\": \"heading\",\n\t *   }'\n\t * \t name: \"textarea\"\n\t *   hint-expander='{\n\t *     \"hint\": \"This is the hint expander\",\n\t *     \"content\": \"This is the content for the hint expander\"\n\t *   }'\n\t *   required=\"true\"\n\t * >\n\t * </ontario-textarea>\n\t */\n\t@Prop() hintExpander?: HintExpander | string;\n\n\t/**\n\t * The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If no language is passed, it will default to English.\n\t */\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/**\n\t * Set this to display an error message\n\t */\n\t@Prop({ mutable: true }) errorMessage?: string;\n\n\t/**\n\t * Used to add a custom function to the textarea 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 textarea 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 textarea 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 textarea onFocus event.\n\t */\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/**\n\t * Used for the `aria-describedby` value of the textarea. This will match with the id of the hint text.\n\t */\n\t@State() hintTextId: string | null | undefined;\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 * Emitted when a input event 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 textarea 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 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 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-textarea> ')\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 `caption` prop.\n\t *\n\t * The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption | string\n\t */\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption | string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/**\n\t * Watch for changes to the `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@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 textarea events and the information pertaining to the textarea to emit.\n\t */\n\tprivate handleEvent(event: Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLTextAreaElement | null;\n\n\t\tthis.internals?.setFormValue?.(input?.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.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\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\treturn this.hintExpander ? `ontario-textarea ontario-textarea-hint-expander--true` : `ontario-textarea`;\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 textarea `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-textarea--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<textarea\n\t\t\t\t\taria-describedby={this.hintTextId}\n\t\t\t\t\tclass={this.getClass()}\n\t\t\t\t\tid={this.getId()}\n\t\t\t\t\tname={this.name}\n\t\t\t\t\tvalue={this.getValue()}\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\trequired={!!this.required}\n\t\t\t\t></textarea>\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\tinput-exists\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"],"mappings":"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","ignoreList":[]}