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

package/dist/collection/components/ontario-header/ontario-header.js

@@ -9,60 +9,150 @@ import { validateLanguage } from '../../utils/validation/validation-functions';
 import translations from '../../translations/global.i18n.json';
 import config from '../../config.json';
 export class OntarioHeader {
-	constructor() {
-		/**
-		 * Logic to handle the menu toggling
-		 */
-		this.handleMenuToggle = () => {
-			this.menuToggle = !this.menuToggle;
-			this.searchToggle = undefined;
-		};
-		/**
-		 * Logic to handle the search toggling
-		 */
-		this.handleSearchToggle = () => {
-			this.searchToggle = !this.searchToggle;
-		};
-		/**
-		 * event.preventDefault(): https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
-		 * location.href: https://developer.mozilla.org/en-US/docs/Web/API/Location/href
-		 */
-		this.handleSubmit = (event) => {
-			event.preventDefault();
-			location.href = `${this.translations.header.ontarioSearchURL[`${this.language}`]}${event.target[0].value}`;
-		};
-		/**
-		 * Logic to make the focus go back to the menu button when the list ends
-		 */
-		this.trapMenuFocus = (e) => {
-			var _a;
-			let dataType = (_a = e.target) === null || _a === void 0 ? void 0 : _a.dataset.type;
-			if (dataType === 'app-desktop') {
-				this.menuButtonDesktop.focus();
-			} else if (dataType === 'app-tablet') {
-				this.menuButtonTablet.focus();
-			} else if (dataType === 'app-mobile') {
-				this.menuButtonMobile.focus();
-			} else {
-				this.menuButton.focus();
-			}
-		};
-		this.type = 'application';
-		this.applicationHeaderInfo = undefined;
-		this.menuItems = undefined;
-		this.disableDynamicMenu = false;
-		this.languageToggleOptions = undefined;
-		this.customLanguageToggle = undefined;
-		this.language = 'en';
-		this.assetBasePath = undefined;
-		this.applicationHeaderInfoState = undefined;
-		this.menuItemState = undefined;
-		this.isDynamicMenu = false;
-		this.languageState = undefined;
-		this.menuToggle = false;
-		this.searchToggle = false;
-		this.translations = translations;
-	}
+	el;
+	/**
+	 * The type of header.
+	 */
+	type = 'application';
+	/**
+	 * Information pertaining to the application header. This is only necessary for the 'application' header type.
+	 *
+	 * This includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.
+	 *
+	 * @example
+	 *  <ontario-header
+	 *    type="application"
+	 *    application-header-info='{
+	 *      "title": "Application name",
+	 *      "href": "/application-homepage",
+	 *      "maxSubheaderDesktopLinks": "3",
+	 *      "maxSubheaderTabletLinks": "2",
+	 *      "maxSubheaderMobileLinks": "1"
+	 *    }'>
+	 *  </ontario-header>
+	 */
+	applicationHeaderInfo;
+	/**
+	 * The items that will go inside the menu.
+	 */
+	menuItems;
+	/**
+	 * Option to disable fetching of the dynamic menu from the Ontario Header API
+	 *
+	 * @example
+	 * 	<ontario-header
+	 * 			type="ontario"
+	 * 			disable-dynamic-menu="false"
+	 *			menu-items='[{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			}]'>
+	 *	</ontario-header>
+	 */
+	disableDynamicMenu = false;
+	/**
+	 * Information pertaining to the language toggle links.
+	 *
+	 * @example
+	 * <ontario-header
+	 * 	language-toggle-options='{
+	 *    "englishLink": "/en",
+	 *    "frenchLink": "/fr"
+	 *  }'
+	 *  ...
+	 * >
+	 * </ontario-header>
+	 */
+	languageToggleOptions;
+	/**
+	 * A custom function to pass to the language toggle button.
+	 */
+	customLanguageToggle;
+	/**
+	 * The language of the component.
+	 * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none is passed, it will default to English.
+	 */
+	language = 'en';
+	/**
+	 * The base path to an assets folder containing the Design System assets
+	 */
+	assetBasePath;
+	/**
+	 * The application header information is reassigned to applicationHeaderInfoState for parsing
+	 */
+	applicationHeaderInfoState;
+	/**
+	 * The menuItems is reassigned to itemState for parsing
+	 *
+	 * @example
+	 * 	<ontario-header
+	 * 			type="ontario"
+	 * 			disable-dynamic-menu="true"
+	 *			menu-items='[{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			},{
+	 *				"title": "Hint",
+	 *				"href": "/ontario-hint"
+	 *				"linkIsActive": "false"
+	 *			}]'>
+	 *	</ontario-header>
+	 */
+	menuItemState;
+	/**
+	 * Check to see if menu is dynamic or static
+	 */
+	isDynamicMenu = false;
+	/**
+	 * The languageToggleOptions is reassigned to languageState for parsing
+	 *
+	 * @example
+	 * 	<ontario-header
+	 *		language-toggle-options='{
+	 *			"englishLink":"/en",
+	 *			"frenchLink": "/fr"
+	 *		}'
+	 *	</ontario-header>
+	 */
+	languageState;
+	/**
+	 * Toggler for the menu and the search button
+	 */
+	menuToggle = false;
+	searchToggle = false;
+	/**
+	 * Assigning values to elements to use them as ref
+	 */
+	header;
+	menuButton;
+	menuButtonDesktop;
+	menuButtonTablet;
+	menuButtonMobile;
+	searchBar;
+	searchButton;
+	translations = translations;
 	parseApplicationHeaderInfo() {
 		const applicationHeaderInfo = this.applicationHeaderInfo;
 		if (applicationHeaderInfo) {
@@ -125,6 +215,42 @@ export class OntarioHeader {
 	handleLanguageToggle(event) {
 		this.handleSetAppLanguage(event.detail.newLanguage);
 	}
+	/**
+	 * Logic to handle the menu toggling
+	 */
+	handleMenuToggle = () => {
+		this.menuToggle = !this.menuToggle;
+		this.searchToggle = undefined;
+	};
+	/**
+	 * Logic to handle the search toggling
+	 */
+	handleSearchToggle = () => {
+		this.searchToggle = !this.searchToggle;
+	};
+	/**
+	 * event.preventDefault(): https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
+	 * location.href: https://developer.mozilla.org/en-US/docs/Web/API/Location/href
+	 */
+	handleSubmit = (event) => {
+		event.preventDefault();
+		location.href = `${this.translations.header.ontarioSearchURL[`${this.language}`]}${event.target[0].value}`;
+	};
+	/**
+	 * Logic to make the focus go back to the menu button when the list ends
+	 */
+	trapMenuFocus = (e) => {
+		let dataType = e.target?.dataset.type;
+		if (dataType === 'app-desktop') {
+			this.menuButtonDesktop.focus();
+		} else if (dataType === 'app-tablet') {
+			this.menuButtonTablet.focus();
+		} else if (dataType === 'app-mobile') {
+			this.menuButtonMobile.focus();
+		} else {
+			this.menuButton.focus();
+		}
+	};
 	/**
 	 * Call to Ontario Menu API to fetch linksets to populate header component
 	 */
@@ -203,10 +329,10 @@ export class OntarioHeader {
 					viewportSize === 'desktop'
 						? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-large'
 						: viewportSize === 'tablet'
-						? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large'
-						: viewportSize === 'mobile'
-						? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-small-only'
-						: 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline',
+							? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large'
+							: viewportSize === 'mobile'
+								? 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline ontario-show-for-small-only'
+								: 'ontario-header__menu-toggler ontario-header-button ontario-header-button--with-outline',
 				'id': this.type === 'ontario' ? 'ontario-header-menu-toggler' : 'ontario-application-header-menu-toggler',
 				'aria-controls': 'ontario-navigation',
 				'aria-label': this.menuToggle
@@ -218,10 +344,10 @@ export class OntarioHeader {
 					viewportSize === 'desktop'
 						? (el) => (this.menuButtonDesktop = el)
 						: viewportSize === 'tablet'
-						? (el) => (this.menuButtonTablet = el)
-						: viewportSize === 'mobile'
-						? (el) => (this.menuButtonMobile = el)
-						: (el) => (this.menuButton = el),
+							? (el) => (this.menuButtonTablet = el)
+							: viewportSize === 'mobile'
+								? (el) => (this.menuButtonMobile = el)
+								: (el) => (this.menuButton = el),
 			},
 			h('span', {
 				class: 'ontario-header__icon-container',
@@ -261,38 +387,21 @@ export class OntarioHeader {
 		}
 	}
 	isMenuVisible(viewportSize) {
-		var _a;
 		const { menuItemState, applicationHeaderInfoState } = this;
 		const { maxSubheaderMobileLinks, maxSubheaderTabletLinks, maxSubheaderDesktopLinks } =
-			applicationHeaderInfoState !== null && applicationHeaderInfoState !== void 0 ? applicationHeaderInfoState : {};
-		const numOfMenuItems =
-			(_a = menuItemState === null || menuItemState === void 0 ? void 0 : menuItemState.length) !== null &&
-			_a !== void 0
-				? _a
-				: 0;
+			applicationHeaderInfoState ?? {};
+		const numOfMenuItems = menuItemState?.length ?? 0;
 		if (numOfMenuItems <= 0) {
 			return false;
 		}
 		if (viewportSize === 'mobile') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderMobileLinks !== null && maxSubheaderMobileLinks !== void 0 ? maxSubheaderMobileLinks : 0) >
-				0
-			);
+			return numOfMenuItems - (maxSubheaderMobileLinks ?? 0) > 0;
 		}
 		if (viewportSize === 'tablet') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderTabletLinks !== null && maxSubheaderTabletLinks !== void 0 ? maxSubheaderTabletLinks : 0) >
-				0
-			);
+			return numOfMenuItems - (maxSubheaderTabletLinks ?? 0) > 0;
 		}
 		if (viewportSize === 'desktop') {
-			return (
-				numOfMenuItems -
-					(maxSubheaderDesktopLinks !== null && maxSubheaderDesktopLinks !== void 0 ? maxSubheaderDesktopLinks : 0) >
-				0
-			);
+			return numOfMenuItems - (maxSubheaderDesktopLinks ?? 0) > 0;
 		}
 		return true;
 	}
@@ -320,7 +429,6 @@ export class OntarioHeader {
 		}
 	}
 	render() {
-		var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
 		const isServiceOntarioType = this.type === 'serviceOntario';
 		if (this.type == 'ontario') {
 			return h(
@@ -406,14 +514,7 @@ export class OntarioHeader {
 										'ontario-header__nav-right-container ontario-columns ontario-small-10 ontario-medium-8 ontario-large-3',
 								},
 								h('ontario-language-toggle', {
-									url:
-										this.language === 'en'
-											? (_a = this.languageState) === null || _a === void 0
-												? void 0
-												: _a.frenchLink
-											: (_b = this.languageState) === null || _b === void 0
-											? void 0
-											: _b.englishLink,
+									url: this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink,
 									size: 'default',
 									customLanguageToggle: this.customLanguageToggle,
 								}),
@@ -472,32 +573,30 @@ export class OntarioHeader {
 							h(
 								'ul',
 								null,
-								(_c = this.menuItemState) === null || _c === void 0
-									? void 0
-									: _c.map((item, index) => {
-											const lastLink = index + 1 === this.menuItemState.length;
-											const activeLinkRegex = item.title.replace(/\s+/g, '-').toLowerCase();
-											const linkIsActive = window.location.pathname.includes(activeLinkRegex);
-											return this.isDynamicMenu
-												? this.generateMenuItem(
-														item.href,
-														item.title,
-														linkIsActive,
-														'ontario-header',
-														'ontario-header-navigation__menu-item',
-														undefined,
-														lastLink,
-												  )
-												: this.generateMenuItem(
-														item.href,
-														item.title,
-														item.linkIsActive,
-														'ontario-header',
-														'ontario-header-navigation__menu-item',
-														item.onClickHandler,
-														lastLink,
-												  );
-									  }),
+								this.menuItemState?.map((item, index) => {
+									const lastLink = index + 1 === this.menuItemState.length;
+									const activeLinkRegex = item.title.replace(/\s+/g, '-').toLowerCase();
+									const linkIsActive = window.location.pathname.includes(activeLinkRegex);
+									return this.isDynamicMenu
+										? this.generateMenuItem(
+												item.href,
+												item.title,
+												linkIsActive,
+												'ontario-header',
+												'ontario-header-navigation__menu-item',
+												undefined,
+												lastLink,
+											)
+										: this.generateMenuItem(
+												item.href,
+												item.title,
+												item.linkIsActive,
+												'ontario-header',
+												'ontario-header-navigation__menu-item',
+												item.onClickHandler,
+												lastLink,
+											);
+								}),
 							),
 						),
 					),
@@ -538,14 +637,7 @@ export class OntarioHeader {
 								{ class: 'ontario-columns ontario-small-6 ontario-application-header__lang-toggle' },
 								h('ontario-language-toggle', {
 									size: 'small',
-									url:
-										this.language === 'en'
-											? (_d = this.languageState) === null || _d === void 0
-												? void 0
-												: _d.frenchLink
-											: (_e = this.languageState) === null || _e === void 0
-											? void 0
-											: _e.englishLink,
+									url: this.language === 'en' ? this.languageState?.frenchLink : this.languageState?.englishLink,
 									customLanguageToggle: this.customLanguageToggle,
 								}),
 							),
@@ -567,18 +659,11 @@ export class OntarioHeader {
 										? h(
 												'p',
 												{ class: 'ontario-application-subheader__heading' },
-												h(
-													'a',
-													{ href: (_f = this.applicationHeaderInfoState) === null || _f === void 0 ? void 0 : _f.href },
-													(_g = this.applicationHeaderInfoState) === null || _g === void 0 ? void 0 : _g.title,
-												),
-										  )
+												h('a', { href: this.applicationHeaderInfoState?.href }, this.applicationHeaderInfoState?.title),
+											)
 										: h(
 												'a',
-												{
-													href: (_h = this.applicationHeaderInfoState) === null || _h === void 0 ? void 0 : _h.href,
-													class: 'ontario-service-subheader__link',
-												},
+												{ href: this.applicationHeaderInfoState?.href, class: 'ontario-service-subheader__link' },
 												h(
 													'div',
 													{ class: 'ontario-service-subheader__heading-container' },
@@ -590,16 +675,14 @@ export class OntarioHeader {
 													h(
 														'p',
 														{ class: 'ontario-service-subheader__description' },
-														(_j = this.applicationHeaderInfoState) === null || _j === void 0 ? void 0 : _j.title,
+														this.applicationHeaderInfoState?.title,
 													),
 												),
-										  ),
+											),
 									h(
 										'div',
 										{ class: 'ontario-application-subheader__menu-container' },
-										!!((_k = this.applicationHeaderInfoState) === null || _k === void 0
-											? void 0
-											: _k.maxSubheaderDesktopLinks) &&
+										!!this.applicationHeaderInfoState?.maxSubheaderDesktopLinks &&
 											h(
 												'ul',
 												{
@@ -609,90 +692,64 @@ export class OntarioHeader {
 															: 'ontario-application-subheader__menu'
 													} ontario-show-for-large`,
 												},
-												(_l = this.menuItemState) === null || _l === void 0
-													? void 0
-													: _l
-															.slice(
-																0,
-																(_m = this.applicationHeaderInfoState) === null || _m === void 0
-																	? void 0
-																	: _m.maxSubheaderDesktopLinks,
-															)
-															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-desktop',
-																	'',
-																	item.onClickHandler,
-																),
-															),
+												this.menuItemState
+													?.slice(0, this.applicationHeaderInfoState?.maxSubheaderDesktopLinks)
+													.map((item) =>
+														this.generateMenuItem(
+															item.href,
+															item.title,
+															item.linkIsActive,
+															'app-desktop',
+															'',
+															item.onClickHandler,
+														),
+													),
 											),
-										!!((_o = this.applicationHeaderInfoState) === null || _o === void 0
-											? void 0
-											: _o.maxSubheaderTabletLinks) &&
+										!!this.applicationHeaderInfoState?.maxSubheaderTabletLinks &&
 											h(
 												'ul',
 												{
 													class:
 														'ontario-application-subheader__menu ontario-hide-for-small ontario-show-for-medium ontario-hide-for-large',
 												},
-												(_p = this.menuItemState) === null || _p === void 0
-													? void 0
-													: _p
-															.slice(
-																0,
-																(_q = this.applicationHeaderInfoState) === null || _q === void 0
-																	? void 0
-																	: _q.maxSubheaderTabletLinks,
-															)
-															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-tablet',
-																	'',
-																	item.onClickHandler,
-																),
-															),
+												this.menuItemState
+													?.slice(0, this.applicationHeaderInfoState?.maxSubheaderTabletLinks)
+													.map((item) =>
+														this.generateMenuItem(
+															item.href,
+															item.title,
+															item.linkIsActive,
+															'app-tablet',
+															'',
+															item.onClickHandler,
+														),
+													),
 											),
-										!!((_r = this.applicationHeaderInfoState) === null || _r === void 0
-											? void 0
-											: _r.maxSubheaderMobileLinks) &&
+										!!this.applicationHeaderInfoState?.maxSubheaderMobileLinks &&
 											h(
 												'ul',
 												{ class: 'ontario-application-subheader__menu ontario-show-for-small-only' },
-												(_s = this.menuItemState) === null || _s === void 0
-													? void 0
-													: _s
-															.slice(0, this.applicationHeaderInfoState.maxSubheaderMobileLinks)
-															.map((item) =>
-																this.generateMenuItem(
-																	item.href,
-																	item.title,
-																	item.linkIsActive,
-																	'app-mobile',
-																	'',
-																	item.onClickHandler,
-																),
-															),
+												this.menuItemState
+													?.slice(0, this.applicationHeaderInfoState.maxSubheaderMobileLinks)
+													.map((item) =>
+														this.generateMenuItem(
+															item.href,
+															item.title,
+															item.linkIsActive,
+															'app-mobile',
+															'',
+															item.onClickHandler,
+														),
+													),
 											),
 										this.menuItemState !== undefined &&
-											((_t = this.applicationHeaderInfoState) === null || _t === void 0
-												? void 0
-												: _t.maxSubheaderDesktopLinks) !== this.menuItemState.length &&
+											this.applicationHeaderInfoState?.maxSubheaderDesktopLinks !== this.menuItemState.length &&
 											this.renderMenuButton('desktop'),
 										this.menuItemState !== undefined &&
-											((_u = this.applicationHeaderInfoState) === null || _u === void 0
-												? void 0
-												: _u.maxSubheaderTabletLinks) !== this.menuItemState.length &&
+											this.applicationHeaderInfoState?.maxSubheaderTabletLinks !== this.menuItemState.length &&
 											this.renderMenuButton('tablet'),
 										this.menuItemState !== undefined &&
-											((_v = this.applicationHeaderInfoState) === null || _v === void 0
-												? void 0
-												: _v.maxSubheaderMobileLinks) !== this.menuItemState.length &&
+											this.applicationHeaderInfoState?.maxSubheaderMobileLinks !== this.menuItemState.length &&
 											this.renderMenuButton('mobile'),
 									),
 								),
@@ -714,74 +771,44 @@ export class OntarioHeader {
 								h(
 									'ul',
 									{ class: 'ontario-show-for-large' },
-									(_w = this.menuItemState) === null || _w === void 0
-										? void 0
-										: _w
-												.slice(
-													(_x = this.applicationHeaderInfoState) === null || _x === void 0
-														? void 0
-														: _x.maxSubheaderDesktopLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderDesktopLinks,
-														'app-desktop',
-													);
-												}),
+									this.menuItemState
+										?.slice(this.applicationHeaderInfoState?.maxSubheaderDesktopLinks, this.menuItemState.length)
+										.map((item, index) => {
+											return this.generateNavigationLinks(
+												item,
+												index,
+												this.applicationHeaderInfoState?.maxSubheaderDesktopLinks,
+												'app-desktop',
+											);
+										}),
 								),
 								h(
 									'ul',
 									{ class: 'ontario-show-for-medium ontario-hide-for-small ontario-hide-for-large' },
-									(_y = this.menuItemState) === null || _y === void 0
-										? void 0
-										: _y
-												.slice(
-													(_z = this.applicationHeaderInfoState) === null || _z === void 0
-														? void 0
-														: _z.maxSubheaderTabletLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderTabletLinks,
-														'app-tablet',
-													);
-												}),
+									this.menuItemState
+										?.slice(this.applicationHeaderInfoState?.maxSubheaderTabletLinks, this.menuItemState.length)
+										.map((item, index) => {
+											return this.generateNavigationLinks(
+												item,
+												index,
+												this.applicationHeaderInfoState?.maxSubheaderTabletLinks,
+												'app-tablet',
+											);
+										}),
 								),
 								h(
 									'ul',
 									{ class: 'ontario-show-for-small-only' },
-									(_0 = this.menuItemState) === null || _0 === void 0
-										? void 0
-										: _0
-												.slice(
-													(_1 = this.applicationHeaderInfoState) === null || _1 === void 0
-														? void 0
-														: _1.maxSubheaderMobileLinks,
-													this.menuItemState.length,
-												)
-												.map((item, index) => {
-													var _a;
-													return this.generateNavigationLinks(
-														item,
-														index,
-														(_a = this.applicationHeaderInfoState) === null || _a === void 0
-															? void 0
-															: _a.maxSubheaderMobileLinks,
-														'app-mobile',
-													);
-												}),
+									this.menuItemState
+										?.slice(this.applicationHeaderInfoState?.maxSubheaderMobileLinks, this.menuItemState.length)
+										.map((item, index) => {
+											return this.generateNavigationLinks(
+												item,
+												index,
+												this.applicationHeaderInfoState?.maxSubheaderMobileLinks,
+												'app-mobile',
+											);
+										}),
 								),
 							),
 						),
@@ -836,6 +863,8 @@ export class OntarioHeader {
 					tags: [],
 					text: 'The type of header.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'type',
 				reflect: false,
 				defaultValue: "'application'",
@@ -865,6 +894,8 @@ export class OntarioHeader {
 					],
 					text: "Information pertaining to the application header. This is only necessary for the 'application' header type.\n\nThis includes the application name, URL and optional props for the number of links in the subheader for desktop, tablet, and mobile views.",
 				},
+				getter: false,
+				setter: false,
 				attribute: 'application-header-info',
 				reflect: false,
 			},
@@ -888,6 +919,8 @@ export class OntarioHeader {
 					tags: [],
 					text: 'The items that will go inside the menu.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'menu-items',
 				reflect: false,
 			},
@@ -910,6 +943,8 @@ export class OntarioHeader {
 					],
 					text: 'Option to disable fetching of the dynamic menu from the Ontario Header API',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'disable-dynamic-menu',
 				reflect: false,
 				defaultValue: 'false',
@@ -939,6 +974,8 @@ export class OntarioHeader {
 					],
 					text: 'Information pertaining to the language toggle links.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language-toggle-options',
 				reflect: false,
 			},
@@ -961,6 +998,8 @@ export class OntarioHeader {
 					tags: [],
 					text: 'A custom function to pass to the language toggle button.',
 				},
+				getter: false,
+				setter: false,
 			},
 			language: {
 				type: 'string',
@@ -982,6 +1021,8 @@ export class OntarioHeader {
 					tags: [],
 					text: 'The language of the component.\nThis 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.',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'language',
 				reflect: false,
 				defaultValue: "'en'",
@@ -1000,6 +1041,8 @@ export class OntarioHeader {
 					tags: [],
 					text: 'The base path to an assets folder containing the Design System assets',
 				},
+				getter: false,
+				setter: false,
 				attribute: 'asset-base-path',
 				reflect: false,
 			},