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

package/components/p-C0Xvjp7G.js

@@ -0,0 +1,282 @@
+import { h, p as proxyCustomElement, H } from './index.js';
+import { c as convertStringToBoolean } from './p-DIe1tcOp.js';
+
+/**
+ * This function generates the menu items in a <li>, accordingly, to the given parameters.
+ *
+ * href and title are necessary, but rest are not.
+ *
+ * @param {string} href - the href of the menu item
+ * @param {string} title - the title of the menu item
+ * @param {boolean} [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
+ * @param {string} [liClass] - if there is a class that is related to the <a> portion of the menu item, put it here
+ * @param {function(PointerEvent): void} [onClickHandler] - for any custom onClick functionality a user might want to add to their menu links
+ */
+const generateMenuItem = (href, title, linkIsActive, liClass, onClickHandler) => {
+	return h(
+		'li',
+		{ class: liClass },
+		h(
+			'a',
+			{ class: `ontario-menu-item ${linkIsActive ? 'ontario-link--active' : ''}`, href: href, onClick: onClickHandler },
+			title,
+		),
+	);
+};
+
+const ontarioHeaderOverflowMenuCss =
+	'.ontario-application-navigation a:focus,.ontario-application-navigation a:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-row{margin:0 auto;max-width:72rem;width:100%}.ontario-row:before,.ontario-row:after{content:"";display:table}.ontario-row:after{clear:both}.ontario-row.ontario-row--collapse>.ontario-column,.ontario-row.ontario-row--collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-row--collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row .ontario-row{margin:0 -1rem;max-width:none;width:auto}.ontario-row .ontario-row:before,.ontario-row .ontario-row:after{content:"";display:table}.ontario-row .ontario-row:after{clear:both}.ontario-row .ontario-row.ontario-row--collapse{margin:0;max-width:none;width:auto}.ontario-row .ontario-row.ontario-row--collapse:before,.ontario-row .ontario-row.ontario-row--collapse:after{content:"";display:table}.ontario-row .ontario-row.ontario-row--collapse:after{clear:both}.ontario-column,.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;width:100%;float:left}.ontario-column+.ontario-column:last-child,.ontario-column+.ontario-columns:last-child,.ontario-columns+.ontario-column:last-child,.ontario-columns+.ontario-columns:last-child{float:right}.ontario-column+.ontario-column.ontario-end,.ontario-column+.ontario-columns.ontario-end,.ontario-columns+.ontario-column.ontario-end,.ontario-columns+.ontario-columns.ontario-end{float:left}@media only screen{.ontario-small-push-0{position:relative;left:0;right:auto}.ontario-small-pull-0{position:relative;right:0;left:auto}.ontario-small-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-small-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-small-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-small-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-small-push-3{position:relative;left:25%;right:auto}.ontario-small-pull-3{position:relative;right:25%;left:auto}.ontario-small-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-small-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-small-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-small-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-small-push-6{position:relative;left:50%;right:auto}.ontario-small-pull-6{position:relative;right:50%;left:auto}.ontario-small-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-small-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-small-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-small-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-small-push-9{position:relative;left:75%;right:auto}.ontario-small-pull-9{position:relative;right:75%;left:auto}.ontario-small-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-small-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-small-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-small-pull-11{position:relative;right:91.6666666667%;left:auto}.ontario-column,.ontario-columns{position:relative;padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-small-1{width:8.3333333333%}.ontario-small-2{width:16.6666666667%}.ontario-small-3{width:25%}.ontario-small-4{width:33.3333333333%}.ontario-small-5{width:41.6666666667%}.ontario-small-6{width:50%}.ontario-small-7{width:58.3333333333%}.ontario-small-8{width:66.6666666667%}.ontario-small-9{width:75%}.ontario-small-10{width:83.3333333333%}.ontario-small-11{width:91.6666666667%}.ontario-small-12{width:100%}.ontario-small-offset-0{margin-left:0 !important}.ontario-small-offset-1{margin-left:8.3333333333% !important}.ontario-small-offset-2{margin-left:16.6666666667% !important}.ontario-small-offset-3{margin-left:25% !important}.ontario-small-offset-4{margin-left:33.3333333333% !important}.ontario-small-offset-5{margin-left:41.6666666667% !important}.ontario-small-offset-6{margin-left:50% !important}.ontario-small-offset-7{margin-left:58.3333333333% !important}.ontario-small-offset-8{margin-left:66.6666666667% !important}.ontario-small-offset-9{margin-left:75% !important}.ontario-small-offset-10{margin-left:83.3333333333% !important}.ontario-small-offset-11{margin-left:91.6666666667% !important}.ontario-small-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.ontario-column.ontario-small-centered,.ontario-columns.ontario-small-centered{margin-left:auto;margin-right:auto;float:none}.ontario-column.ontario-small-uncentered,.ontario-columns.ontario-small-uncentered{float:left;margin-left:0;margin-right:0}.ontario-column.ontario-small-centered:last-child,.ontario-columns.ontario-small-centered:last-child{float:none}.ontario-column.ontario-small-uncentered:last-child,.ontario-columns.ontario-small-uncentered:last-child{float:left}.ontario-column.ontario-small-uncentered.ontario-opposite,.ontario-columns.ontario-small-uncentered.ontario-opposite{float:right}.ontario-row.ontario-small-collapse>.ontario-column,.ontario-row.ontario-small-collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-small-collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row.ontario-small-uncollapse>.ontario-column,.ontario-row.ontario-small-uncollapse>.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}}@media only screen and (min-width:40.063em){.ontario-medium-push-0{position:relative;left:0;right:auto}.ontario-medium-pull-0{position:relative;right:0;left:auto}.ontario-medium-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-medium-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-medium-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-medium-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-medium-push-3{position:relative;left:25%;right:auto}.ontario-medium-pull-3{position:relative;right:25%;left:auto}.ontario-medium-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-medium-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-medium-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-medium-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-medium-push-6{position:relative;left:50%;right:auto}.ontario-medium-pull-6{position:relative;right:50%;left:auto}.ontario-medium-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-medium-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-medium-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-medium-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-medium-push-9{position:relative;left:75%;right:auto}.ontario-medium-pull-9{position:relative;right:75%;left:auto}.ontario-medium-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-medium-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-medium-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-medium-pull-11{position:relative;right:91.6666666667%;left:auto}.ontario-column,.ontario-columns{position:relative;padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-medium-1{width:8.3333333333%}.ontario-medium-2{width:16.6666666667%}.ontario-medium-3{width:25%}.ontario-medium-4{width:33.3333333333%}.ontario-medium-5{width:41.6666666667%}.ontario-medium-6{width:50%}.ontario-medium-7{width:58.3333333333%}.ontario-medium-8{width:66.6666666667%}.ontario-medium-9{width:75%}.ontario-medium-10{width:83.3333333333%}.ontario-medium-11{width:91.6666666667%}.ontario-medium-12{width:100%}.ontario-medium-offset-0{margin-left:0 !important}.ontario-medium-offset-1{margin-left:8.3333333333% !important}.ontario-medium-offset-2{margin-left:16.6666666667% !important}.ontario-medium-offset-3{margin-left:25% !important}.ontario-medium-offset-4{margin-left:33.3333333333% !important}.ontario-medium-offset-5{margin-left:41.6666666667% !important}.ontario-medium-offset-6{margin-left:50% !important}.ontario-medium-offset-7{margin-left:58.3333333333% !important}.ontario-medium-offset-8{margin-left:66.6666666667% !important}.ontario-medium-offset-9{margin-left:75% !important}.ontario-medium-offset-10{margin-left:83.3333333333% !important}.ontario-medium-offset-11{margin-left:91.6666666667% !important}.ontario-medium-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.ontario-column.ontario-medium-centered,.ontario-columns.ontario-medium-centered{margin-left:auto;margin-right:auto;float:none}.ontario-column.ontario-medium-uncentered,.ontario-columns.ontario-medium-uncentered{float:left;margin-left:0;margin-right:0}.ontario-column.ontario-medium-centered:last-child,.ontario-columns.ontario-medium-centered:last-child{float:none}.ontario-column.ontario-medium-uncentered:last-child,.ontario-columns.ontario-medium-uncentered:last-child{float:left}.ontario-column.ontario-medium-uncentered.ontario-opposite,.ontario-columns.ontario-medium-uncentered.ontario-opposite{float:right}.ontario-row.ontario-medium-collapse>.ontario-column,.ontario-row.ontario-medium-collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-medium-collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row.ontario-medium-uncollapse>.ontario-column,.ontario-row.ontario-medium-uncollapse>.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}}@media only screen and (min-width:73.063em){.ontario-large-push-0{position:relative;left:0;right:auto}.ontario-large-pull-0{position:relative;right:0;left:auto}.ontario-large-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-large-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-large-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-large-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-large-push-3{position:relative;left:25%;right:auto}.ontario-large-pull-3{position:relative;right:25%;left:auto}.ontario-large-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-large-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-large-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-large-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-large-push-6{position:relative;left:50%;right:auto}.ontario-large-pull-6{position:relative;right:50%;left:auto}.ontario-large-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-large-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-large-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-large-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-large-push-9{position:relative;left:75%;right:auto}.ontario-large-pull-9{position:relative;right:75%;left:auto}.ontario-large-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-large-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-large-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-large-pull-11{position:relative;right:91.6666666667%;left:auto}.ontario-column,.ontario-columns{position:relative;padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-large-1{width:8.3333333333%}.ontario-large-2{width:16.6666666667%}.ontario-large-3{width:25%}.ontario-large-4{width:33.3333333333%}.ontario-large-5{width:41.6666666667%}.ontario-large-6{width:50%}.ontario-large-7{width:58.3333333333%}.ontario-large-8{width:66.6666666667%}.ontario-large-9{width:75%}.ontario-large-10{width:83.3333333333%}.ontario-large-11{width:91.6666666667%}.ontario-large-12{width:100%}.ontario-large-offset-0{margin-left:0 !important}.ontario-large-offset-1{margin-left:8.3333333333% !important}.ontario-large-offset-2{margin-left:16.6666666667% !important}.ontario-large-offset-3{margin-left:25% !important}.ontario-large-offset-4{margin-left:33.3333333333% !important}.ontario-large-offset-5{margin-left:41.6666666667% !important}.ontario-large-offset-6{margin-left:50% !important}.ontario-large-offset-7{margin-left:58.3333333333% !important}.ontario-large-offset-8{margin-left:66.6666666667% !important}.ontario-large-offset-9{margin-left:75% !important}.ontario-large-offset-10{margin-left:83.3333333333% !important}.ontario-large-offset-11{margin-left:91.6666666667% !important}.ontario-large-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.ontario-column.ontario-large-centered,.ontario-columns.ontario-large-centered{margin-left:auto;margin-right:auto;float:none}.ontario-column.ontario-large-uncentered,.ontario-columns.ontario-large-uncentered{float:left;margin-left:0;margin-right:0}.ontario-column.ontario-large-centered:last-child,.ontario-columns.ontario-large-centered:last-child{float:none}.ontario-column.ontario-large-uncentered:last-child,.ontario-columns.ontario-large-uncentered:last-child{float:left}.ontario-column.ontario-large-uncentered.ontario-opposite,.ontario-columns.ontario-large-uncentered.ontario-opposite{float:right}.ontario-row.ontario-large-collapse>.ontario-column,.ontario-row.ontario-large-collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-large-collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row.ontario-large-uncollapse>.ontario-column,.ontario-row.ontario-large-uncollapse>.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-push-0{position:relative;left:0;right:auto}.ontario-pull-0{position:relative;right:0;left:auto}.ontario-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-push-3{position:relative;left:25%;right:auto}.ontario-pull-3{position:relative;right:25%;left:auto}.ontario-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-push-6{position:relative;left:50%;right:auto}.ontario-pull-6{position:relative;right:50%;left:auto}.ontario-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-push-9{position:relative;left:75%;right:auto}.ontario-pull-9{position:relative;right:75%;left:auto}.ontario-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-pull-11{position:relative;right:91.6666666667%;left:auto}}@media only screen and (min-width:96.063em){.ontario-xlarge-push-0{position:relative;left:0;right:auto}.ontario-xlarge-pull-0{position:relative;right:0;left:auto}.ontario-xlarge-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-xlarge-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-xlarge-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-xlarge-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-xlarge-push-3{position:relative;left:25%;right:auto}.ontario-xlarge-pull-3{position:relative;right:25%;left:auto}.ontario-xlarge-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-xlarge-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-xlarge-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-xlarge-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-xlarge-push-6{position:relative;left:50%;right:auto}.ontario-xlarge-pull-6{position:relative;right:50%;left:auto}.ontario-xlarge-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-xlarge-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-xlarge-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-xlarge-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-xlarge-push-9{position:relative;left:75%;right:auto}.ontario-xlarge-pull-9{position:relative;right:75%;left:auto}.ontario-xlarge-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-xlarge-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-xlarge-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-xlarge-pull-11{position:relative;right:91.6666666667%;left:auto}.ontario-column,.ontario-columns{position:relative;padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-xlarge-1{width:8.3333333333%}.ontario-xlarge-2{width:16.6666666667%}.ontario-xlarge-3{width:25%}.ontario-xlarge-4{width:33.3333333333%}.ontario-xlarge-5{width:41.6666666667%}.ontario-xlarge-6{width:50%}.ontario-xlarge-7{width:58.3333333333%}.ontario-xlarge-8{width:66.6666666667%}.ontario-xlarge-9{width:75%}.ontario-xlarge-10{width:83.3333333333%}.ontario-xlarge-11{width:91.6666666667%}.ontario-xlarge-12{width:100%}.ontario-xlarge-offset-0{margin-left:0 !important}.ontario-xlarge-offset-1{margin-left:8.3333333333% !important}.ontario-xlarge-offset-2{margin-left:16.6666666667% !important}.ontario-xlarge-offset-3{margin-left:25% !important}.ontario-xlarge-offset-4{margin-left:33.3333333333% !important}.ontario-xlarge-offset-5{margin-left:41.6666666667% !important}.ontario-xlarge-offset-6{margin-left:50% !important}.ontario-xlarge-offset-7{margin-left:58.3333333333% !important}.ontario-xlarge-offset-8{margin-left:66.6666666667% !important}.ontario-xlarge-offset-9{margin-left:75% !important}.ontario-xlarge-offset-10{margin-left:83.3333333333% !important}.ontario-xlarge-offset-11{margin-left:91.6666666667% !important}.ontario-xlarge-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.ontario-column.ontario-xlarge-centered,.ontario-columns.ontario-xlarge-centered{margin-left:auto;margin-right:auto;float:none}.ontario-column.ontario-xlarge-uncentered,.ontario-columns.ontario-xlarge-uncentered{float:left;margin-left:0;margin-right:0}.ontario-column.ontario-xlarge-centered:last-child,.ontario-columns.ontario-xlarge-centered:last-child{float:none}.ontario-column.ontario-xlarge-uncentered:last-child,.ontario-columns.ontario-xlarge-uncentered:last-child{float:left}.ontario-column.ontario-xlarge-uncentered.ontario-opposite,.ontario-columns.ontario-xlarge-uncentered.ontario-opposite{float:right}.ontario-row.ontario-xlarge-collapse>.ontario-column,.ontario-row.ontario-xlarge-collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-xlarge-collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row.ontario-xlarge-uncollapse>.ontario-column,.ontario-row.ontario-xlarge-uncollapse>.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}}@media only screen and (min-width:120.063em){.ontario-xxlarge-push-0{position:relative;left:0;right:auto}.ontario-xxlarge-pull-0{position:relative;right:0;left:auto}.ontario-xxlarge-push-1{position:relative;left:8.3333333333%;right:auto}.ontario-xxlarge-pull-1{position:relative;right:8.3333333333%;left:auto}.ontario-xxlarge-push-2{position:relative;left:16.6666666667%;right:auto}.ontario-xxlarge-pull-2{position:relative;right:16.6666666667%;left:auto}.ontario-xxlarge-push-3{position:relative;left:25%;right:auto}.ontario-xxlarge-pull-3{position:relative;right:25%;left:auto}.ontario-xxlarge-push-4{position:relative;left:33.3333333333%;right:auto}.ontario-xxlarge-pull-4{position:relative;right:33.3333333333%;left:auto}.ontario-xxlarge-push-5{position:relative;left:41.6666666667%;right:auto}.ontario-xxlarge-pull-5{position:relative;right:41.6666666667%;left:auto}.ontario-xxlarge-push-6{position:relative;left:50%;right:auto}.ontario-xxlarge-pull-6{position:relative;right:50%;left:auto}.ontario-xxlarge-push-7{position:relative;left:58.3333333333%;right:auto}.ontario-xxlarge-pull-7{position:relative;right:58.3333333333%;left:auto}.ontario-xxlarge-push-8{position:relative;left:66.6666666667%;right:auto}.ontario-xxlarge-pull-8{position:relative;right:66.6666666667%;left:auto}.ontario-xxlarge-push-9{position:relative;left:75%;right:auto}.ontario-xxlarge-pull-9{position:relative;right:75%;left:auto}.ontario-xxlarge-push-10{position:relative;left:83.3333333333%;right:auto}.ontario-xxlarge-pull-10{position:relative;right:83.3333333333%;left:auto}.ontario-xxlarge-push-11{position:relative;left:91.6666666667%;right:auto}.ontario-xxlarge-pull-11{position:relative;right:91.6666666667%;left:auto}.ontario-column,.ontario-columns{position:relative;padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}.ontario-xxlarge-1{width:8.3333333333%}.ontario-xxlarge-2{width:16.6666666667%}.ontario-xxlarge-3{width:25%}.ontario-xxlarge-4{width:33.3333333333%}.ontario-xxlarge-5{width:41.6666666667%}.ontario-xxlarge-6{width:50%}.ontario-xxlarge-7{width:58.3333333333%}.ontario-xxlarge-8{width:66.6666666667%}.ontario-xxlarge-9{width:75%}.ontario-xxlarge-10{width:83.3333333333%}.ontario-xxlarge-11{width:91.6666666667%}.ontario-xxlarge-12{width:100%}.ontario-xxlarge-offset-0{margin-left:0 !important}.ontario-xxlarge-offset-1{margin-left:8.3333333333% !important}.ontario-xxlarge-offset-2{margin-left:16.6666666667% !important}.ontario-xxlarge-offset-3{margin-left:25% !important}.ontario-xxlarge-offset-4{margin-left:33.3333333333% !important}.ontario-xxlarge-offset-5{margin-left:41.6666666667% !important}.ontario-xxlarge-offset-6{margin-left:50% !important}.ontario-xxlarge-offset-7{margin-left:58.3333333333% !important}.ontario-xxlarge-offset-8{margin-left:66.6666666667% !important}.ontario-xxlarge-offset-9{margin-left:75% !important}.ontario-xxlarge-offset-10{margin-left:83.3333333333% !important}.ontario-xxlarge-offset-11{margin-left:91.6666666667% !important}.ontario-xxlarge-reset-order{float:left;left:auto;margin-left:0;margin-right:0;right:auto}.ontario-column.ontario-xxlarge-centered,.ontario-columns.ontario-xxlarge-centered{margin-left:auto;margin-right:auto;float:none}.ontario-column.ontario-xxlarge-uncentered,.ontario-columns.ontario-xxlarge-uncentered{float:left;margin-left:0;margin-right:0}.ontario-column.ontario-xxlarge-centered:last-child,.ontario-columns.ontario-xxlarge-centered:last-child{float:none}.ontario-column.ontario-xxlarge-uncentered:last-child,.ontario-columns.ontario-xxlarge-uncentered:last-child{float:left}.ontario-column.ontario-xxlarge-uncentered.ontario-opposite,.ontario-columns.ontario-xxlarge-uncentered.ontario-opposite{float:right}.ontario-row.ontario-xxlarge-collapse>.ontario-column,.ontario-row.ontario-xxlarge-collapse>.ontario-columns{padding-left:0;padding-right:0}.ontario-row.ontario-xxlarge-collapse .ontario-row{margin-left:0;margin-right:0}.ontario-row.ontario-xxlarge-uncollapse>.ontario-column,.ontario-row.ontario-xxlarge-uncollapse>.ontario-columns{padding-left:1rem;padding-right:1rem;box-sizing:border-box;float:left}}.ontario-hide{display:none !important}.ontario-invisible{visibility:hidden !important}@media screen and (max-width: 39.99875em){.ontario-hide-for-small-only{display:none !important}}@media screen and (max-width: 0em), screen and (min-width: 40em){.ontario-show-for-small-only{display:none !important}}@media print, screen and (min-width: 40em){.ontario-hide-for-medium{display:none !important}}@media screen and (max-width: 39.99875em){.ontario-show-for-medium{display:none !important}}@media screen and (min-width: 40em) and (max-width: 72.99875em){.ontario-hide-for-medium-only{display:none !important}}@media screen and (max-width: 39.99875em), screen and (min-width: 73em){.ontario-show-for-medium-only{display:none !important}}@media print, screen and (min-width: 73em){.ontario-hide-for-large{display:none !important}}@media screen and (max-width: 72.99875em){.ontario-show-for-large{display:none !important}}@media screen and (min-width: 73em) and (max-width: 95.99875em){.ontario-hide-for-large-only{display:none !important}}@media screen and (max-width: 72.99875em), screen and (min-width: 96em){.ontario-show-for-large-only{display:none !important}}.ontario-show-for-sr,.ontario-show-on-focus{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0, 0, 0, 0)}.ontario-show-on-focus:active,.ontario-show-on-focus:focus{position:static;width:auto;height:auto;overflow:visible;clip:auto}.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}@media screen and (orientation: landscape){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:block !important}}@media screen and (orientation: portrait){.ontario-show-for-landscape,.ontario-hide-for-portrait{display:none !important}}.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}@media screen and (orientation: landscape){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:none !important}}@media screen and (orientation: portrait){.ontario-hide-for-landscape,.ontario-show-for-portrait{display:block !important}}.ontario-application-navigation{position:absolute;width:100%}@media screen and (min-width: 73em){.ontario-application-navigation{position:relative;max-width:72rem;width:auto;margin:0 auto}}.ontario-application-navigation__container{background:#FFFFFF;position:absolute;transform:translateY(-100%);width:100%;visibility:hidden;z-index:4}@media screen and (min-width: 73em){.ontario-application-navigation__container{box-shadow:0 4px 12px rgba(0, 0, 0, 0.3);border-radius:4px;display:none;position:absolute;right:1rem;top:calc(100% - 0.5rem);min-width:18.125rem;max-width:30%;z-index:4}}.ontario-application-navigation ul{list-style:none;padding:0.5rem 0;margin:0;border-bottom:1px solid #cccccc}@media screen and (min-width: 73em){.ontario-application-navigation ul{border-bottom:none}}.ontario-application-navigation li{border-top:1px solid #cccccc;padding:0;margin-bottom:0}.ontario-application-navigation li:last-of-type{border-bottom:1px solid #cccccc}.ontario-application-navigation a{color:rgb(25.5, 25.5, 25.5);display:block;font-size:1.125rem;font-weight:600;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-decoration:none;padding:0.625rem 1.5rem}.ontario-application-navigation a:hover{text-decoration:underline;background-color:#e5e5e5}.ontario-application-navigation a:active{text-decoration:underline;background-color:#cccccc}.ontario-application-navigation a:focus,.ontario-application-navigation a:active{box-shadow:0 0 0 4px #009ADB inset}.ontario-application-navigation a.ontario-link--active{border-left:6px solid rgb(25.5, 25.5, 25.5);background-color:rgb(242.25, 242.25, 242.25)}.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container{background:#FFFFFF;visibility:visible;transform:translateY(0);transition:transform 0.4s ease-in-out}@media screen and (min-width: 73em){.ontario-application-navigation.ontario-navigation--open .ontario-application-navigation__container{transition:none;display:block}}.ontario-application-navigation.ontario-navigation--open{background:#FFFFFF;z-index:4}@media screen and (max-width: 73em){.ontario-application-navigation.ontario-navigation--open{z-index:2}}';
+
+const OntarioHeaderOverflowMenu = /*@__PURE__*/ proxyCustomElement(
+	class OntarioHeaderOverflowMenu extends H {
+		constructor() {
+			super();
+			this.__registerHost();
+			this.__attachShadow();
+			/**
+			 * A state variable to determine whether the menu is open or not.
+			 *
+			 * The boolean values map to eitherthe presence (true) or absense (false)
+			 * of the `ontario-navigation--open` on the `nav` element.
+			 *
+			 * Triggered by either the `menuButtonToggled` event or the `click` event.
+			 */
+			this.menuIsOpen = false;
+			/**
+			 * The current index of the menu item that is focused.
+			 */
+			this.currentIndex = undefined;
+		}
+		/**
+		 * Resets the `currentIndex` value.
+		 *
+		 * Typically resets when the menu closes.
+		 */
+		resetCurrentIndex() {
+			this.currentIndex = undefined;
+		}
+		/**
+		 * Updates the `currentIndex` value.
+		 *
+		 * Typically occurs when a user uses the keyboard to tab through
+		 * menu items.
+		 */
+		updateCurrentIndex(index) {
+			this.currentIndex = index;
+		}
+		parseMenuItems() {
+			var _a, _b;
+			if (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {
+				let copyOfMenuItems = JSON.parse(this.menuItems);
+				// convert stringified boolean values for linkIsActive, to their actual boolean equivalents
+				copyOfMenuItems.forEach((menuItem) =>
+					typeof (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive) === 'string'
+						? (menuItem.linkIsActive = convertStringToBoolean(
+								menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive,
+							))
+						: menuItem === null || menuItem === void 0
+							? void 0
+							: menuItem.linkIsActive,
+				);
+				this.menuItemState = copyOfMenuItems;
+			} else {
+				this.menuItemState = this.menuItems;
+			}
+			const activeLinkSet =
+				(_b =
+					(_a = this.menuItemState) === null || _a === void 0
+						? void 0
+						: _a.some((menuItem) => (menuItem === null || menuItem === void 0 ? void 0 : menuItem.linkIsActive))) !==
+					null && _b !== void 0
+					? _b
+					: [];
+			// If no active link is set, try to guess and set the active link based
+			// on if the href is included in the URL.
+			if (!activeLinkSet) {
+				const copyOfMenuItemsState = [...this.menuItemState];
+				copyOfMenuItemsState.forEach((menuItem) => {
+					const sanitizedSlug = menuItem.href.replace(/\s+/g, '-').toLowerCase();
+					menuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);
+				});
+				this.menuItemState = [...copyOfMenuItemsState];
+			}
+		}
+		/**
+		 * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.
+		 * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.
+		 */
+		toggleMenuVisibility(event) {
+			this.menuIsOpen = event.detail;
+			this.resetCurrentIndex();
+		}
+		/**
+		 * Listens for clicks on anything outside of the menu.
+		 * If a click is outside of the menu, then the menu will
+		 * close.
+		 */
+		handleClick(event) {
+			// if the menu (ref) is clicked, return
+			if (event.composedPath().includes(this.menu)) {
+				this.menuIsOpen = true;
+				return;
+			}
+			this.menuIsOpen = false;
+			this.resetCurrentIndex();
+		}
+		/**
+		 * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.
+		 */
+		handleKeyDown(event) {
+			if (this.menuIsOpen) {
+				const focusableElements = this.menu.querySelectorAll('.ontario-menu-item');
+				switch (event.key) {
+					case 'ArrowDown':
+						event.preventDefault();
+						if (this.currentIndex === -1 || this.currentIndex === undefined) {
+							this.currentIndex = 0;
+						} else {
+							this.currentIndex = (this.currentIndex + 1) % focusableElements.length;
+						}
+						focusableElements[this.currentIndex].focus();
+						/**
+						 * Tried other ways of triggering this function to condense code via a watch on currentIndex,
+						 * and also tried sticking at the bottom of the switch's parent if statement.
+						 *
+						 * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)
+						 * or just didn't appear at all. Setting this at the source seems to have the best outcome.
+						 */
+						this.updateAriaLive(this.currentIndex);
+						break;
+					case 'ArrowUp':
+						event.preventDefault();
+						if (this.currentIndex === -1 || this.currentIndex === undefined) {
+							this.currentIndex = focusableElements.length - 1;
+						} else {
+							this.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;
+						}
+						focusableElements[this.currentIndex].focus();
+						this.updateAriaLive(this.currentIndex);
+						break;
+					case 'Tab':
+						focusableElements.forEach((element, index) => {
+							// within an event listener, the scope of "this" changes.
+							// To continue keeping the scope global, set a variable that captures it
+							// Without this, calls to global variables/methods/functions will not work
+							const self = this;
+							if (
+								!element.hasAttribute('data-has-focus-listener') ||
+								element.getAttribute('data-has-focus-listener') === 'false'
+							) {
+								element.addEventListener('focus', () => self.updateCurrentIndex(index));
+								element.setAttribute('data-has-focus-listener', 'true');
+							}
+						});
+						break;
+				}
+			}
+		}
+		/**
+		 * Updates the aria-live region with the menu item count and selected option.
+		 *
+		 * @param {number} selectedIndex The index of the selected menu item
+		 */
+		updateAriaLive(selectedIndex) {
+			const menuItemCount = this.menuItemState.length;
+			// index starts at 0, but users expect the message to start at 1
+			// therefore add value of +1 to each index value to align with
+			// user expectations
+			const selectedMenuItemNumber = selectedIndex + 1;
+			const ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;
+			if (this.ariaLiveRegion) {
+				this.ariaLiveRegion.textContent = ariaLiveMessage;
+			}
+		}
+		componentWillLoad() {
+			this.parseMenuItems();
+		}
+		render() {
+			var _a;
+			return h(
+				'nav',
+				{
+					key: '40a8817026e0ccbf8f66e943036af9120695779a',
+					role: 'navigation',
+					class: this.menuIsOpen
+						? 'ontario-application-navigation ontario-navigation--open'
+						: 'ontario-application-navigation',
+					id: 'ontario-application-navigation',
+					ref: (el) => (this.menu = el),
+				},
+				h(
+					'div',
+					{ key: '4a6898ad7ffab9bee53ad6929e35775eaba745b4', class: 'ontario-application-navigation__container' },
+					h(
+						'ul',
+						{ key: 'b960fd93ab7c46ce40da33b545d05e4a034c42b4' },
+						(_a = this.menuItemState) === null || _a === void 0
+							? void 0
+							: _a.map((item) => {
+									return generateMenuItem(item.href, item.title, item.linkIsActive);
+								}),
+					),
+				),
+				h('div', {
+					'key': 'eef3c22887ffe8f9d6370e101d6125fa5f226fd7',
+					'id': 'aria-live-region',
+					'class': 'ontario-show-for-sr',
+					'aria-live': 'polite',
+					'ref': (el) => (this.ariaLiveRegion = el),
+				}),
+			);
+		}
+		get el() {
+			return this;
+		}
+		static get watchers() {
+			return {
+				menuItems: ['parseMenuItems'],
+			};
+		}
+		static get style() {
+			return ontarioHeaderOverflowMenuCss;
+		}
+	},
+	[
+		257,
+		'ontario-header-overflow-menu',
+		{
+			menuItems: [1, 'menu-items'],
+			menuItemState: [32],
+			menuIsOpen: [32],
+		},
+		[
+			[8, 'menuButtonToggled', 'toggleMenuVisibility'],
+			[10, 'click', 'handleClick'],
+			[8, 'keydown', 'handleKeyDown'],
+		],
+		{
+			menuItems: ['parseMenuItems'],
+		},
+	],
+);
+function defineCustomElement() {
+	if (typeof customElements === 'undefined') {
+		return;
+	}
+	const components = ['ontario-header-overflow-menu'];
+	components.forEach((tagName) => {
+		switch (tagName) {
+			case 'ontario-header-overflow-menu':
+				if (!customElements.get(tagName)) {
+					customElements.define(tagName, OntarioHeaderOverflowMenu);
+				}
+				break;
+		}
+	});
+}
+defineCustomElement();
+
+export { OntarioHeaderOverflowMenu as O, defineCustomElement as d, generateMenuItem as g };
+//# sourceMappingURL=p-C0Xvjp7G.js.map
+
+//# sourceMappingURL=p-C0Xvjp7G.js.map

package/components/p-C0Xvjp7G.js.map

@@ -0,0 +1 @@
+{"file":"p-C0Xvjp7G.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/utils/components/header/header-menu-items.tsx","src/components/ontario-header-overflow-menu/ontario-header-overflow-menu.scss?tag=ontario-header-overflow-menu&encapsulation=shadow","src/components/ontario-header-overflow-menu/ontario-header-overflow-menu.tsx"],"sourcesContent":["import { h } from '@stencil/core';\n\n/**\n * This function generates the menu items in a <li>, accordingly, to the given parameters.\n *\n * href and title are necessary, but rest are not.\n *\n * @param {string} href - the href of the menu item\n * @param {string} title - the title of the menu item\n * @param {boolean} [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 * @param {string} [liClass] - if there is a class that is related to the <a> portion of the menu item, put it here\n * @param {function(PointerEvent): void} [onClickHandler] - for any custom onClick functionality a user might want to add to their menu links\n */\nexport const generateMenuItem = (\n\thref: string,\n\ttitle: string,\n\tlinkIsActive?: boolean,\n\tliClass?: string,\n\tonClickHandler?: (e: PointerEvent) => void,\n) => {\n\treturn (\n\t\t<li class={liClass}>\n\t\t\t<a class={`ontario-menu-item ${linkIsActive ? 'ontario-link--active' : ''}`} href={href} onClick={onClickHandler}>\n\t\t\t\t{title}\n\t\t\t</a>\n\t\t</li>\n\t);\n};\n","@use 'sass:math';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as\n\tglobalFunctions;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/z-index.variables' as zIndex;\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/5-layout/_grid.layout.scss';\n@use 'pkg:@ongov/ontario-design-system-global-styles/dist/styles/scss/7-overrides/_visibility.overrides.scss';\n@use '../../styles/header.scss';\n\n$navigation-link-bg--hover: #e5e5e5;\n$ontario-navigation-link-padding-vertical: globalFunctions.px-to-rem(10);\n$ontario-header-overflow-menu-link-font-size: globalFunctions.px-to-rem(18);\n$border-width-1: 1px;\n$border-width-6: 6px;\n\n.ontario-application-navigation {\n\t@extend %ontario-application-navigation;\n\n\tul {\n\t\tlist-style: none;\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-0;\n\t\tmargin: spacing.$spacing-0;\n\t\tborder-bottom: $border-width-1 solid colours.$ontario-greyscale-20;\n\n\t\t@media screen and (min-width: breakpoints.$medium-breakpoint) {\n\t\t\tborder-bottom: none;\n\t\t}\n\t}\n\n\tli {\n\t\tborder-top: $border-width-1 solid colours.$ontario-greyscale-20;\n\t\tpadding: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\n\t\t&:last-of-type {\n\t\t\tborder-bottom: $border-width-1 solid colours.$ontario-greyscale-20;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\tdisplay: block;\n\t\tfont-size: $ontario-header-overflow-menu-link-font-size;\n\t\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\t\tfont-family: fonts.$ontario-font-open-sans;\n\t\ttext-decoration: none;\n\t\tpadding: $ontario-navigation-link-padding-vertical spacing.$spacing-5;\n\n\t\t&:hover {\n\t\t\ttext-decoration: underline;\n\t\t\tbackground-color: $navigation-link-bg--hover;\n\t\t}\n\n\t\t&:active {\n\t\t\ttext-decoration: underline;\n\t\t\tbackground-color: colours.$ontario-greyscale-20;\n\t\t}\n\n\t\t&:focus,\n\t\t&:active {\n\t\t\t@extend %ontario-focus;\n\t\t\tbox-shadow: focusPlaceholders.$ontario-focus-box-shadow inset;\n\t\t}\n\n\t\t&.ontario-link--active {\n\t\t\tborder-left: $border-width-6 solid colours.$ontario-colour-black;\n\t\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\t}\n\t}\n}\n\n.ontario-application-navigation__container {\n\t@extend %ontario-application-navigation__container;\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\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tz-index: zIndex.$ontario-z-index-above-medium; // behind header for animation purposes\n\t}\n}\n","import { Component, Prop, State, Watch, h, Listen, Element } from '@stencil/core';\nimport { MenuItem } from '../../utils/common/common.interface';\nimport { generateMenuItem } from '../../utils/components/header/header-menu-items';\nimport { convertStringToBoolean } from '../../utils/helper/utils';\n\n@Component({\n\ttag: 'ontario-header-overflow-menu',\n\tstyleUrl: 'ontario-header-overflow-menu.scss',\n\tshadow: true,\n})\nexport class OntarioHeaderOverflowMenu {\n\t@Element() el: HTMLElement;\n\n\t/**\n\t * The items that will go inside the menu.\n\t *\n\t *  @example\n\t * \t<ontario-header-overflow-menu\n\t *\t\t\tmenu-items='[{\n\t *\t\t\t\t\"title\": \"Link 1\",\n\t *\t\t\t\t\"href\": \"/link-1\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 2\",\n\t *\t\t\t\t\"href\": \"/link-2\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 3\",\n\t *\t\t\t\t\"href\": \"/link-3\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t},{\n\t *\t\t\t\t\"title\": \"Link 4\",\n\t *\t\t\t\t\"href\": \"/link-4\"\n\t *\t\t\t\t\"linkIsActive\": \"false\"\n\t *\t\t\t}]'>\n\t *\t</ontario-header-overflow-menu>\n\t */\n\t@Prop() menuItems: MenuItem[] | string;\n\n\t/**\n\t * The `menuItems` are reassigned to `menuItemState` for parsing by `parseMenuItems()`.\n\t */\n\t@State() private menuItemState: MenuItem[];\n\n\t/**\n\t * A state variable to determine whether the menu is open or not.\n\t *\n\t * The boolean values map to eitherthe presence (true) or absense (false)\n\t * of the `ontario-navigation--open` on the `nav` element.\n\t *\n\t * Triggered by either the `menuButtonToggled` event or the `click` event.\n\t */\n\t@State() private menuIsOpen: boolean = false;\n\n\t/**\n\t * The current index of the menu item that is focused.\n\t */\n\tprivate currentIndex: number | undefined = undefined;\n\n\t/**\n\t * Resets the `currentIndex` value.\n\t *\n\t * Typically resets when the menu closes.\n\t */\n\tprivate resetCurrentIndex() {\n\t\tthis.currentIndex = undefined;\n\t}\n\n\t/**\n\t * Updates the `currentIndex` value.\n\t *\n\t * Typically occurs when a user uses the keyboard to tab through\n\t * menu items.\n\t */\n\tprivate updateCurrentIndex(index: number) {\n\t\tthis.currentIndex = index;\n\t}\n\n\t@Watch('menuItems')\n\tparseMenuItems() {\n\t\tif (!Array.isArray(this.menuItems) && typeof this.menuItems === 'string') {\n\t\t\tlet copyOfMenuItems = JSON.parse(this.menuItems) as MenuItem[];\n\t\t\t// convert stringified boolean values for linkIsActive, to their actual boolean equivalents\n\t\t\tcopyOfMenuItems.forEach((menuItem) =>\n\t\t\t\ttypeof menuItem?.linkIsActive === 'string'\n\t\t\t\t\t? (menuItem.linkIsActive = convertStringToBoolean(menuItem?.linkIsActive))\n\t\t\t\t\t: menuItem?.linkIsActive,\n\t\t\t);\n\t\t\tthis.menuItemState = copyOfMenuItems;\n\t\t} else {\n\t\t\tthis.menuItemState = this.menuItems;\n\t\t}\n\n\t\tconst activeLinkSet = this.menuItemState?.some((menuItem) => menuItem?.linkIsActive) ?? [];\n\n\t\t// If no active link is set, try to guess and set the active link based\n\t\t// on if the href is included in the URL.\n\t\tif (!activeLinkSet) {\n\t\t\tconst copyOfMenuItemsState = [...this.menuItemState];\n\t\t\tcopyOfMenuItemsState.forEach((menuItem) => {\n\t\t\t\tconst sanitizedSlug = menuItem.href.replace(/\\s+/g, '-').toLowerCase();\n\t\t\t\tmenuItem.linkIsActive = window.location.pathname.includes(sanitizedSlug);\n\t\t\t});\n\n\t\t\tthis.menuItemState = [...copyOfMenuItemsState];\n\t\t}\n\t}\n\n\t/**\n\t * This listens for the `menuButtonToggled` event sent from the header menu button when it is clicked.\n\t * It is used to toggle menu visibility by adding or removing the ontario-navigation--open class on the nav element.\n\t */\n\t@Listen('menuButtonToggled', { target: 'window' })\n\ttoggleMenuVisibility(event: CustomEvent<boolean>) {\n\t\tthis.menuIsOpen = event.detail;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for clicks on anything outside of the menu.\n\t * If a click is outside of the menu, then the menu will\n\t * close.\n\t */\n\t@Listen('click', { capture: true, target: 'window' })\n\thandleClick(event: PointerEvent) {\n\t\t// if the menu (ref) is clicked, return\n\t\tif (event.composedPath().includes(this.menu)) {\n\t\t\tthis.menuIsOpen = true;\n\t\t\treturn;\n\t\t}\n\n\t\tthis.menuIsOpen = false;\n\t\tthis.resetCurrentIndex();\n\t}\n\n\t/**\n\t * Listens for keydown events and handles navigation within the menu using the ArrowUp and ArrowDown keys.\n\t */\n\t@Listen('keydown', { target: 'window' })\n\thandleKeyDown(event: KeyboardEvent) {\n\t\tif (this.menuIsOpen) {\n\t\t\tconst focusableElements: NodeListOf<HTMLElement> = this.menu.querySelectorAll('.ontario-menu-item');\n\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = 0;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex + 1) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\t/**\n\t\t\t\t\t * Tried other ways of triggering this function to condense code via a watch on currentIndex,\n\t\t\t\t\t * and also tried sticking at the bottom of the switch's parent if statement.\n\t\t\t\t\t *\n\t\t\t\t\t * Both attempts led to inconsistent results (e.g. the aria message was out of sync with currentIndex)\n\t\t\t\t\t * or just didn't appear at all. Setting this at the source seems to have the best outcome.\n\t\t\t\t\t */\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tif (this.currentIndex === -1 || this.currentIndex === undefined) {\n\t\t\t\t\t\tthis.currentIndex = focusableElements.length - 1;\n\t\t\t\t\t} else {\n\t\t\t\t\t\tthis.currentIndex = (this.currentIndex - 1 + focusableElements.length) % focusableElements.length;\n\t\t\t\t\t}\n\t\t\t\t\tfocusableElements[this.currentIndex].focus();\n\t\t\t\t\tthis.updateAriaLive(this.currentIndex);\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'Tab':\n\t\t\t\t\tfocusableElements.forEach((element, index) => {\n\t\t\t\t\t\t// within an event listener, the scope of \"this\" changes.\n\t\t\t\t\t\t// To continue keeping the scope global, set a variable that captures it\n\t\t\t\t\t\t// Without this, calls to global variables/methods/functions will not work\n\t\t\t\t\t\tconst self = this;\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t!element.hasAttribute('data-has-focus-listener') ||\n\t\t\t\t\t\t\telement.getAttribute('data-has-focus-listener') === 'false'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\telement.addEventListener('focus', () => self.updateCurrentIndex(index));\n\t\t\t\t\t\t\telement.setAttribute('data-has-focus-listener', 'true');\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Updates the aria-live region with the menu item count and selected option.\n\t *\n\t * @param {number} selectedIndex The index of the selected menu item\n\t */\n\tprivate updateAriaLive(selectedIndex: number) {\n\t\tconst menuItemCount = this.menuItemState.length;\n\t\t// index starts at 0, but users expect the message to start at 1\n\t\t// therefore add value of +1 to each index value to align with\n\t\t// user expectations\n\t\tconst selectedMenuItemNumber = selectedIndex + 1;\n\t\tconst ariaLiveMessage = `Option ${selectedMenuItemNumber} of ${menuItemCount}`;\n\n\t\tif (this.ariaLiveRegion) {\n\t\t\tthis.ariaLiveRegion.textContent = ariaLiveMessage;\n\t\t}\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.parseMenuItems();\n\t}\n\n\t/**\n\t * Assigning values to elements to use them as ref\n\t */\n\tprivate menu!: HTMLElement;\n\n\t/**\n\t * The aria-live region that will be updated with the selected menu item.\n\t */\n\tprivate ariaLiveRegion!: HTMLElement;\n\n\trender() {\n\t\treturn (\n\t\t\t<nav\n\t\t\t\trole=\"navigation\"\n\t\t\t\tclass={\n\t\t\t\t\tthis.menuIsOpen ? 'ontario-application-navigation ontario-navigation--open' : 'ontario-application-navigation'\n\t\t\t\t}\n\t\t\t\tid=\"ontario-application-navigation\"\n\t\t\t\tref={(el) => (this.menu = el as HTMLElement)}\n\t\t\t>\n\t\t\t\t<div class=\"ontario-application-navigation__container\">\n\t\t\t\t\t<ul>\n\t\t\t\t\t\t{this.menuItemState?.map((item: MenuItem) => {\n\t\t\t\t\t\t\treturn generateMenuItem(item.href, item.title, item.linkIsActive);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</ul>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tid=\"aria-live-region\"\n\t\t\t\t\tclass=\"ontario-show-for-sr\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\tref={(el) => (this.ariaLiveRegion = el as HTMLElement)}\n\t\t\t\t></div>\n\t\t\t</nav>\n\t\t);\n\t}\n}\n"],"version":3}

package/components/p-C73HZQcq.js

@@ -0,0 +1,89 @@
+import { h } from './index.js';
+
+var __rest =
+	(undefined && undefined.__rest) ||
+	function (s, e) {
+		var t = {};
+		for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+		if (s != null && typeof Object.getOwnPropertySymbols === 'function')
+			for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+				if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+			}
+		return t;
+	};
+const Input = (_a) => {
+	var {
+			autoComplete,
+			className,
+			id,
+			name,
+			placeholder,
+			type,
+			value,
+			checked,
+			required,
+			onKeyDown,
+			onInput,
+			onChange,
+			onBlur,
+			onFocus,
+			onClick,
+			ariaInvalid,
+			ariaDescribedBy,
+			ref,
+			inputMode,
+		} = _a,
+		props = __rest(_a, [
+			'autoComplete',
+			'className',
+			'id',
+			'name',
+			'placeholder',
+			'type',
+			'value',
+			'checked',
+			'required',
+			'onKeyDown',
+			'onInput',
+			'onChange',
+			'onBlur',
+			'onFocus',
+			'onClick',
+			'ariaInvalid',
+			'ariaDescribedBy',
+			'ref',
+			'inputMode',
+		]);
+	return h(
+		'input',
+		Object.assign(
+			{
+				'autoComplete': autoComplete,
+				'class': className,
+				'id': id,
+				'name': name,
+				'type': type,
+				'value': value,
+				'checked': checked,
+				'placeholder': placeholder,
+				'required': !!required,
+				'onKeyDown': onKeyDown,
+				'onInput': onInput,
+				'onChange': onChange,
+				'onBlur': onBlur,
+				'onFocus': onFocus,
+				'onClick': onClick,
+				'inputMode': inputMode,
+				'ref': ref,
+				'aria-invalid': ariaInvalid,
+				'aria-describedby': ariaDescribedBy,
+			},
+			props,
+		),
+	);
+};
+
+export { Input as I };
+//# sourceMappingURL=p-C73HZQcq.js.map
+
+//# sourceMappingURL=p-C73HZQcq.js.map

package/components/p-C73HZQcq.js.map

@@ -0,0 +1 @@
+{"file":"p-C73HZQcq.js","mappings":";;;;;;;;;;;;;AAwBa,MAAA,KAAK,GAAoC,CAAC,EAqBtD,KAAI;AArBkD,IAAA,IAAA,EACtD,YAAY,EACZ,SAAS,EACT,EAAE,EACF,IAAI,EACJ,WAAW,EACX,IAAI,EACJ,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACR,MAAM,EACN,OAAO,EACP,OAAO,EACP,WAAW,EACX,eAAe,EACf,GAAG,EACH,SAAS,EAAA,GAAA,EAET,EADG,KAAK,GAAA,MAAA,CAAA,EAAA,EApB8C,4NAqBtD,CADQ;AAER,IAAA,QACC,CACC,CAAA,OAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,SAAS,EAChB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,CAAC,CAAC,QAAQ,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EAAA,cAAA,EACM,WAAW,EACP,kBAAA,EAAA,eAAe,IAC7B,KAAK,CAAA,CACR;AAEJ;;;;","names":[],"sources":["src/utils/common/input/input.tsx"],"sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\n\nexport type InputProps = {\n\tautoComplete?: string;\n\tclassName?: string;\n\tid: string;\n\tname?: string;\n\ttype: string;\n\tvalue?: string | number;\n\tchecked?: boolean;\n\trequired?: boolean;\n\tinputMode?: string;\n\tplaceholder?: string;\n\tariaInvalid?: boolean;\n\tariaDescribedBy?: string;\n\tonKeyDown?: ((event: Event) => void) | undefined;\n\tonInput?: ((event: Event) => void) | undefined;\n\tonChange?: ((event: Event) => void) | undefined;\n\tonBlur?: ((event: Event) => void) | undefined;\n\tonFocus?: ((event: Event) => void) | undefined;\n\tonClick?: ((event: Event) => void) | undefined;\n\tref?: (el: HTMLInputElement) => HTMLElement;\n};\n\nexport const Input: FunctionalComponent<InputProps> = ({\n\tautoComplete,\n\tclassName,\n\tid,\n\tname,\n\tplaceholder,\n\ttype,\n\tvalue,\n\tchecked,\n\trequired,\n\tonKeyDown,\n\tonInput,\n\tonChange,\n\tonBlur,\n\tonFocus,\n\tonClick,\n\tariaInvalid,\n\tariaDescribedBy,\n\tref,\n\tinputMode,\n\t...props\n}) => {\n\treturn (\n\t\t<input\n\t\t\tautoComplete={autoComplete}\n\t\t\tclass={className}\n\t\t\tid={id}\n\t\t\tname={name}\n\t\t\ttype={type}\n\t\t\tvalue={value}\n\t\t\tchecked={checked}\n\t\t\tplaceholder={placeholder}\n\t\t\trequired={!!required}\n\t\t\tonKeyDown={onKeyDown}\n\t\t\tonInput={onInput}\n\t\t\tonChange={onChange}\n\t\t\tonBlur={onBlur}\n\t\t\tonFocus={onFocus}\n\t\t\tonClick={onClick}\n\t\t\tinputMode={inputMode}\n\t\t\tref={ref}\n\t\t\taria-invalid={ariaInvalid}\n\t\t\taria-describedby={ariaDescribedBy}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"version":3}