npm - @ongov/ontario-design-system-component-library - Versions diffs - 4.2.0-alpha.1 - Mend

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

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

Files changed (2806) hide show

package/dist/components/ontario-header.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ontario-header.js","mappings":"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","names":["OntarioHeader"],"sources":["src/components/ontario-header/ontario-application-header.scss?tag=ontario-header&mode=application&encapsulation=shadow","src/components/ontario-header/ontario-header.scss?tag=ontario-header&mode=ontario&encapsulation=shadow","src/components/ontario-header/service-ontario-header.scss?tag=ontario-header&mode=serviceOntario&encapsulation=shadow","src/components/ontario-header/ontario-header.tsx"],"sourcesContent":["@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/typography.variables' as typography;\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/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: typography.$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: typography.$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: transform 0.3s ease-in-out, visibility 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: typography.$ontario-font-open-sans;\n\theight: globalVariables.$standard-input-height;\n\tline-height: math.div(14, 9);\n\ttext-align: center;\n\ttext-decoration: none;\n\n\t&: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: transform 0.3s ease-in-out, visibility 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: typography.$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/typography.variables' as typography;\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-input-padding: 7.2rem;\n$ontario-search-input-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.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: typography.$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: transform 0.3s ease-in-out, visibility 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: typography.$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: transform 0.3s ease-in-out, visibility 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-input-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-input-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: typography.$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: 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: 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: typography.$ontario-font-open-sans;\n\theight: globalVariables.$standard-input-height;\n\tline-height: math.div(14, 9);\n\ttext-align: center;\n\ttext-decoration: none;\n\n\t&: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: transform 0.3s ease-in-out, visibility 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: typography.$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/typography.variables' as typography;\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 './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\t&:last-of-type {\n\t\tdisplay: none;\n\t}\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: typography.$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, getAssetPath } 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 { 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: {\n\t\tontario: 'ontario-header.scss',\n\t\tapplication: 'ontario-application-header.scss',\n\t\tserviceOntario: 'service-ontario-header.scss',\n\t},\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 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\tthis.language = validateLanguage(event);\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 a link to the given image based on the base asset path.\n\t * @param imageName Name of the image to build the path to\n\t * @returns Path to image with asset path\n\t */\n\tprivate getImageAssetSrcPath(imageName: string): string {\n\t\treturn `${this.assetBasePath ? this.assetBasePath : getAssetPath('./assets')}/${imageName}`;\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? '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: viewportSize === 'mobile'\n\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: '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? (el) => (this.menuButtonTablet = el as HTMLInputElement)\n\t\t\t\t\t\t: viewportSize === 'mobile'\n\t\t\t\t\t\t? (el) => (this.menuButtonMobile = el as HTMLInputElement)\n\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 maxSubheaderMobileLinks && numOfMenuItems - maxSubheaderMobileLinks > 0;\n\t\t}\n\n\t\tif (viewportSize === 'tablet') {\n\t\t\treturn maxSubheaderTabletLinks && numOfMenuItems - maxSubheaderTabletLinks > 0;\n\t\t}\n\n\t\tif (viewportSize === 'desktop') {\n\t\t\treturn maxSubheaderDesktopLinks && numOfMenuItems - maxSubheaderDesktopLinks > 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\tlanguage={this.language}\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 )\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 );\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\tlanguage={this.language}\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 subhearder */}\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{/* Desktop 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"],"version":3}

package/dist/components/ontario-hint-expander.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../types/components';
+interface OntarioHintExpander extends Components.OntarioHintExpander, HTMLElement {}
+export const OntarioHintExpander: {
+	prototype: OntarioHintExpander;
+	new (): OntarioHintExpander;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ontario-hint-expander.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { O as OntarioHintExpander$1, d as defineCustomElement$1 } from './ontario-hint-expander2.js';
+const OntarioHintExpander = OntarioHintExpander$1;
+const defineCustomElement = defineCustomElement$1;
+export { OntarioHintExpander, defineCustomElement };
+//# sourceMappingURL=ontario-hint-expander.js.map

package/dist/components/ontario-hint-expander.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"ontario-hint-expander.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/dist/components/ontario-hint-expander2.js ADDED Viewed

@@ -0,0 +1,257 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { b as validatePropExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { d as defineCustomElement$2 } from './ontario-icon-chevron-down2.js';
+import { d as defineCustomElement$1 } from './ontario-icon-chevron-up2.js';
+import { v as v4 } from './v4.js';
+const ontarioHintExpanderCss =
+	'.ontario-hint-expander__button:focus,.ontario-hint-expander__button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-hint-expander__container{max-width:48rem}.ontario-hint-expander__button{color:#0066CC;cursor:pointer;background:none;border:none;display:flex;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:400;font-size:1rem;text-align:left;margin:0 0 1rem 0;padding:0 0.25rem 0 0}.ontario-hint-expander__button-icon--close{display:none;margin-right:0.25rem}.ontario-hint-expander__button-icon--open{display:inline-block;margin-right:0.25rem}.ontario-hint-expander__button:hover{color:#00478F}.ontario-hint-expander__button:active{color:#002142}.ontario-hint-expander__button>*{pointer-events:none}.ontario-hint-expander__content{border-left:4px solid #cccccc;color:#1a1a1a;background-color:#f2f2f2;display:none;padding:1rem 1rem 1rem calc(1rem + 0.25rem);margin:0 0 1rem 0.25rem}.ontario-hint-expander__content *:first-child{margin-top:0}.ontario-hint-expander__content *:last-child{margin-bottom:0}.ontario-hint-expander__content img{width:100%}@media screen and (min-width: 40em){.ontario-hint-expander__content img{width:50%}}.ontario-hint-expander__content.ontario-expander__content--opened{display:block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--close{display:inline-block}.ontario-hint-expander__container.ontario-expander--active .ontario-hint-expander__button-icon--open{display:none}.ontario-hint-expander__checkbox-exists-true{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-hint-expander__checkbox-exists-true{margin-top:1rem}}.ontario-input+.ontario-hint-expander__container{margin-top:-1.5rem !important}.ontario-checkboxes__item .ontario-hint-expander__container,.ontario-radios__item .ontario-hint-expander__container{margin-left:0.5rem}.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:0.75rem}@media screen and (max-width: 40em){.ontario-checkboxes__label+.ontario-hint-expander__container,.ontario-radios__label+.ontario-hint-expander__container{margin-top:1rem}}';
+const OntarioHintExpanderStyle0 = ontarioHintExpanderCss;
+const OntarioHintExpander = /*@__PURE__*/ proxyCustomElement(
+	class OntarioHintExpander extends HTMLElement {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			this.toggleExpanderEvent = createEvent(this, 'toggleExpanderEvent', 7);
+			this.onClick = (ev) => {
+				const hintExpander = ev.target;
+				const hintExpanderParent =
+					hintExpander === null || hintExpander === void 0 ? void 0 : hintExpander.parentElement;
+				hintExpanderParent === null || hintExpanderParent === void 0
+					? void 0
+					: hintExpanderParent.classList.toggle('ontario-expander--active');
+				let content =
+					hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.querySelector("[data-toggle='ontario-expander-content']");
+				content === null || content === void 0 ? void 0 : content.classList.toggle('ontario-expander__content--opened');
+				(
+					content === null || content === void 0
+						? void 0
+						: content.classList.contains('ontario-expander__content--opened')
+				)
+					? content.setAttribute('aria-hidden', 'false')
+					: content === null || content === void 0
+					? void 0
+					: content.setAttribute('aria-hidden', 'true');
+				(
+					hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.classList.contains('ontario-expander--active')
+				)
+					? hintExpanderParent === null || hintExpanderParent === void 0
+						? void 0
+						: hintExpanderParent.setAttribute('aria-expanded', 'true')
+					: hintExpanderParent === null || hintExpanderParent === void 0
+					? void 0
+					: hintExpanderParent.setAttribute('aria-expanded', 'false');
+				this.toggleExpanderEvent.emit(ev);
+			};
+			this.hintContentType = 'string';
+			this.hint = undefined;
+			this.content = undefined;
+			this.elementId = undefined;
+			this.hintState = undefined;
+		}
+		/**
+		 * Watch for changes to the `hintContentType` prop for validation purposes.
+		 * If none is provided, or the wrong type is provided, it will default to `string`.
+		 */
+		checkHintContentType() {
+			if (this.hintContentType !== 'string' && this.hintContentType !== 'html') {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' hintContentType ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-text> ')
+					.addRegularText('was not one of the permitted types. A default type of `string` will be applied.')
+					.printMessage();
+				return (this.hintContentType = 'string');
+			}
+			return this.hintContentType;
+		}
+		/*
+		 * Watch for changes in the `hint` prop for validation purposes.
+		 * If no `hint` prop is provided, the `hint` will be set to the host element textContent (if it exists).
+		 */
+		updateHintContent() {
+			var _a, _b;
+			this.hintState =
+				(_b = (_a = this.hint) !== null && _a !== void 0 ? _a : this.host.textContent) !== null && _b !== void 0
+					? _b
+					: '';
+			this.validateHint(this.hintState);
+		}
+		/*
+		 * Watch for changes to the `content` prop for validation purposes.
+		 *
+		 * Validate the `content` and make sure the `content` has a value.
+		 * Log a warning if user doesn't input a value for the `content` or element content.
+		 */
+		validateContent(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' content ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-expander> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/*
+		 * Watch for changes in the `hint` prop for validation purposes.
+		 *
+		 * Validate the `hint` and make sure the `hint` has a value.
+		 * Log a warning if user doesn't input a value for the `hint`.
+		 */
+		validateHint(newValue) {
+			if (validatePropExists(newValue)) {
+				const message = new ConsoleMessageClass();
+				message
+					.addDesignSystemTag()
+					.addMonospaceText(' hint ')
+					.addRegularText('for')
+					.addMonospaceText(' <ontario-hint-expander> ')
+					.addRegularText('was not provided')
+					.printMessage();
+			}
+		}
+		/**
+		 * Set `hint` using internal component logic
+		 */
+		componentWillLoad() {
+			var _a;
+			this.elementId = (_a = this.elementId) !== null && _a !== void 0 ? _a : v4();
+			this.updateHintContent();
+			this.checkHintContentType();
+			this.validateContent(this.content);
+		}
+		/**
+		 * This helper is used to help load translations for any slots + text content passed in by the user.
+		 */
+		componentDidLoad() {
+			const observer = new MutationObserver((mutations) => {
+				mutations.forEach((mutation) => {
+					if (mutation.type === 'attributes') {
+						this.updateHintContent();
+					}
+				});
+			});
+			const options = { attributes: true };
+			observer.observe(this.host, options);
+		}
+		getId() {
+			var _a;
+			return (_a = this.elementId) !== null && _a !== void 0 ? _a : '';
+		}
+		render() {
+			return h(
+				'div',
+				{ key: 'de5d2b0a0639a3e14fdf9cd34b6781123ebf13a9', class: 'ontario-hint-expander__container' },
+				h(
+					'button',
+					{
+						'key': 'c586376903b31fb1b538404ae5b4259102df500a',
+						'class': 'ontario-hint-expander__button',
+						'onClick': this.onClick,
+						'id': `hint-expander-button-${this.getId()}`,
+						'aria-controls': `hint-expander-content-${this.getId()}`,
+						'aria-expanded': 'false',
+						'data-toggle': 'ontario-collapse',
+					},
+					h(
+						'span',
+						{
+							key: 'b689528264cebabec3c09e2df78d4d9a9e75146c',
+							class: 'ontario-hint-expander__button-icon--close ontario-icon',
+						},
+						h('ontario-icon-chevron-up', { key: 'bf7c9b5056e86ca9c1c9dc212b4f9442db826981', colour: 'inherit' }),
+					),
+					h(
+						'span',
+						{ key: 'f67fca9ae4a6de2df5410d1294cf2735dcb8f594', class: 'ontario-hint-expander__button-icon--open' },
+						h('ontario-icon-chevron-down', { key: '8b9e57741ce0a0e93128a0f2d850b3f3eca0cb49', colour: 'inherit' }),
+					),
+					this.hint,
+				),
+				h(
+					'div',
+					{
+						'key': 'bd9dda3470cf492efdf50601262da71b28d35201',
+						'class': 'ontario-hint-expander__content',
+						'id': `hint-expander-content-${this.getId()}`,
+						'aria-labelledby': `hint-expander-button-${this.getId()}`,
+						'aria-hidden': 'true',
+						'data-toggle': 'ontario-expander-content',
+					},
+					this.hintContentType === 'string' ? this.content : h('span', { innerHTML: this.content }),
+				),
+			);
+		}
+		get host() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				hintContentType: ['checkHintContentType'],
+				hint: ['updateHintContent'],
+				content: ['validateContent'],
+			};
+		}
+		static get style() {
+			return OntarioHintExpanderStyle0;
+		}
+	},
+	[
+		1,
+		'ontario-hint-expander',
+		{
+			hintContentType: [1025, 'hint-content-type'],
+			hint: [1],
+			content: [1025],
+			elementId: [1025, 'element-id'],
+			hintState: [32],
+		},
+		undefined,
+		{
+			hintContentType: ['checkHintContentType'],
+			hint: ['updateHintContent'],
+			content: ['validateContent'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-hint-expander', 'ontario-icon-chevron-down', 'ontario-icon-chevron-up'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-hint-expander':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioHintExpander);
+				}
+				break;
+			case 'ontario-icon-chevron-down':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$2();
+				}
+				break;
+			case 'ontario-icon-chevron-up':
+				if (!customElements.get(tagName)) {
+					defineCustomElement$1();
+				}
+				break;
+		}
+	});
+}
+export { OntarioHintExpander as O, defineCustomElement as d };
+//# sourceMappingURL=ontario-hint-expander2.js.map

package/dist/components/ontario-hint-expander2.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ontario-hint-expander2.js","mappings":"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","names":["uuid"],"sources":["src/components/ontario-hint-expander/ontario-hint-expander.scss?tag=ontario-hint-expander&encapsulation=shadow","src/components/ontario-hint-expander/ontario-hint-expander.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/1-variables/typography.variables' as typography;\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: typography.$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"],"version":3}

package/dist/components/ontario-hint-text.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import type { Components, JSX } from '../types/components';
+interface OntarioHintText extends Components.OntarioHintText, HTMLElement {}
+export const OntarioHintText: {
+	prototype: OntarioHintText;
+	new (): OntarioHintText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ontario-hint-text.js ADDED Viewed

@@ -0,0 +1,8 @@
+import { O as OntarioHintText$1, d as defineCustomElement$1 } from './ontario-hint-text2.js';
+const OntarioHintText = OntarioHintText$1;
+const defineCustomElement = defineCustomElement$1;
+export { OntarioHintText, defineCustomElement };
+//# sourceMappingURL=ontario-hint-text.js.map

package/dist/components/ontario-hint-text.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"file":"ontario-hint-text.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}