@qhealth-design-system/core 1.0.38

package/src/components/_global/css/tags/component.scss

@@ -0,0 +1,272 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Tags
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+.qld__tag{
+	display: inline-block;
+	@include QLD-fontgrid( xs );
+	line-height: 20px;
+	@include QLD-space ( padding, 0 .5unit);
+	@include QLD-space ( font-size, .875unit);
+	@include QLD-space ( line-height, 1.5unit);
+	color: var(--QLD-color-light-text__muted);
+	border: 1px solid var(--QLD-color-light-border);
+	border-radius: $QLD-border-radius-md;
+	@include QLD-space(margin, 0);
+	@include QLD-focus();
+	// white-space: nowrap;
+	text-align: center;
+
+	.qld__card .qld__card__footer &{ 
+		color: var(--QLD-color-light-text__muted);
+		border-color: var(--QLD-color-light-border);
+	}
+
+	.qld__body--alt &,
+	.qld__card .qld__card__footer &{
+		border-color: var(--QLD-color-light-alt-border);
+		color: var(--QLD-color-light-text__muted);
+	}
+
+	.qld__body--dark &,
+	.qld__card--dark .qld__card__footer &{
+		border-color: var(--QLD-color-dark-alt-border);
+		color: var(--QLD-color-dark-text__muted);
+		@include QLD-focus( 'dark' );
+	}
+
+	.qld__body--dark-alt &,
+	.qld__card--dark-alt .qld__card__footer &{
+		border-color: var(--QLD-color-dark-border);
+		color: var(--QLD-color-dark-text__muted);
+		@include QLD-focus( 'dark' );
+	}
+
+	&.qld__tag--large {
+		@include QLD-fontgrid( sm );
+		@include QLD-space ( font-size, 1unit);
+		@include QLD-space ( padding, .5unit 1unit );
+		border-radius: $QLD-border-radius-lg;
+	}
+}
+
+a.qld__tag,
+.qld__tag.qld__tag--link{
+	color: var(--QLD-color-light-link);
+	border-color: var(--QLD-color-light-link);
+	text-decoration: none;
+
+	.qld__card .qld__card__footer &{ 
+		color: var(--QLD-color-light-link);
+		border-color: var(--QLD-color-light-link);
+
+		&:hover {
+			text-decoration: underline;
+			background-color: var(--QLD-color-light-button__hover);
+			color: var(--QLD-color-dark-link); 
+			border-color: var(--QLD-color-light-button__hover);
+		}
+	}
+
+	&:hover {
+		text-decoration: underline;
+		background-color: var(--QLD-color-light-button__hover);
+		color: var(--QLD-color-dark-link); 
+		border-color: var(--QLD-color-light-button__hover);
+	}
+
+	.qld__body--alt &,
+	.qld__card--alt .qld__card__footer &{
+		color: var(--QLD-color-light-link);
+		border-color: var(--QLD-color-light-link);
+
+		&:hover {
+			background-color: var(--QLD-color-light-button__hover);
+			color: var(--QLD-color-dark-link); 
+			border-color: var(--QLD-color-light-button__hover);
+		}
+	}
+
+	.qld__body--dark &,
+	.qld__card--dark .qld__card__footer &,
+	.qld__body--dark-alt &,
+	.qld__card--dark-alt .qld__card__footer &{
+		border-color: var(--QLD-color-dark-link);
+		color: var(--QLD-color-dark-link);
+
+		&:hover {
+			background-color: var(--QLD-color-dark-button__hover);
+			color: var(--QLD-color-dark-button__text); 
+			border-color: var(--QLD-color-dark-button__hover);
+		}
+	}
+}
+
+.qld__tag.qld__tag--info,
+.qld__card__footer .qld__tag.qld__tag--info{
+	color: var(--QLD-color-light-text__muted);
+	border-color: var(--QLD-color-light-background__shade);
+	background-color: var(--QLD-color-light-background__shade);
+
+	.qld__body--alt &,
+	.qld__card--alt .qld__card__footer &{
+		color: var(--QLD-color-light-text__muted);
+		border-color: var(--QLD-color-light-alt-background__shade);
+		background-color: var(--QLD-color-light-alt-background__shade);
+	}
+
+	.qld__body--dark &,
+	.qld__card--dark .qld__card__footer &{
+		color: var(--QLD-color-dark-text__muted);
+		border-color: var(--QLD-color-dark-background__shade);
+		background-color: var(--QLD-color-dark-background__shade);
+	}
+
+	.qld__body--dark-alt &,
+	.qld__card--dark-alt .qld__card__footer &{
+		color: var(--QLD-color-dark-text__muted);
+		border-color: var(--QLD-color-dark-alt-background__shade);
+		background-color: var(--QLD-color-dark-alt-background__shade);
+	}
+}
+
+.qld__tag.qld__tag--filter,
+.qld__card__footer .qld__tag.qld__tag--filter{
+	color: var(--QLD-color-light-text);
+	border-color: var(--QLD-color-light-border);
+	background-color: transparent;
+	@include QLD-fontgrid( sm );
+	@include QLD-space ( font-size, 1unit);
+	@include QLD-space ( padding, .5unit 1unit );
+	border-radius: $QLD-border-radius-lg;
+	text-decoration: none;
+
+	&:hover {
+		color: var(--QLD-color-light-text);
+		text-decoration: none;
+		background-color: transparent;
+		border-color: var(--QLD-color-light-border);
+	}
+
+	.qld__tag--filter-close{
+
+		// background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-light-alt-button));
+		// background-color: transparent;
+		// background-repeat: no-repeat;
+		// background-position: center;
+		mask-image: QLD-svguri($QLD-icon-close);
+		mask-repeat: no-repeat;
+		mask-position: center;
+		background-color: var(--QLD-color-light-alt-button);
+		@include QLD-space(height, 1.25unit);
+		@include QLD-space(width, 1.25unit);
+		display: inline-block;
+		@include QLD-space(margin-left, .5unit);
+		@include QLD-space(line-height, 1.5unit);
+		vertical-align: middle;
+		white-space: nowrap;
+		border: none;
+		cursor: pointer;
+
+
+		&:hover{
+			// background-image: QLD-svg-with-fill($QLD-icon-close-hover, var(--QLD-color-light-alt-button));
+			mask-image: QLD-svguri($QLD-icon-close-hover);
+			background-color: var(--QLD-color-light-alt-button__hover);
+		}
+	}
+
+	.qld__body--alt &,
+	.qld__card--alt .qld__card__footer &{
+		color: var(--QLD-color-light-text);
+		border-color: var(--QLD-color-light-alt-border);
+
+		&:hover {
+			color: var(--QLD-color-light-text);
+			text-decoration: none;
+			background-color: transparent;
+			border-color: var(--QLD-color-light-alt-border);
+		}
+	}
+
+	.qld__body--dark &,
+	.qld__card--dark .qld__card__footer &{
+		color: var(--QLD-color-dark-text);
+		border-color: var(--QLD-color-dark-alt-border);
+
+		&:hover {
+			color: var(--QLD-color-dark-text);
+			text-decoration: none;
+			background-color: transparent;
+			border-color: var(--QLD-color-dark-alt-border);
+		}
+
+		.qld__tag--filter-close{
+			// background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-dark-alt-button));
+			background-color: var(--QLD-color-dark-alt-button__hover);
+
+			&:hover{
+				// background-image: QLD-svg-with-fill($QLD-icon-close-hover, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button__hover);
+			}
+		}
+	}
+
+	.qld__body--dark-alt &,
+	.qld__card--dark-alt .qld__card__footer &{
+		color: var(--QLD-color-dark-text);
+		border-color: var(--QLD-color-dark-border);
+
+		&:hover {
+			color: var(--QLD-color-dark-text);
+			text-decoration: none;
+			background-color: transparent;
+			border-color: var(--QLD-color-dark-border);
+		}
+
+		.qld__tag--filter-close{
+			// background-image: QLD-svg-with-fill($QLD-icon-close, var(--QLD-color-dark-alt-button));
+			background-color: var(--QLD-color-dark-alt-button__hover);
+
+			&:hover{
+				// background-image: QLD-svg-with-fill($QLD-icon-close-hover, var(--QLD-color-dark-alt-button));
+				background-color: var(--QLD-color-dark-alt-button__hover);
+			}
+		}
+
+	}
+
+}
+
+.qld__tag-list {
+	display: flex;
+	flex-direction: row;
+	padding: 0;
+	list-style-type: none;
+	flex-wrap: wrap;
+	@include QLD-space ( margin, 0.5unit 0);
+	&--space-between {
+		justify-content: space-between;
+	}
+
+	li {
+		@include QLD-space ( margin, 0.5unit 0.5unit 0 0 );
+		display: inline-block;
+		
+
+		.slick-slider .slick-slide &{
+			height: auto;
+		}
+		
+		> .qld__tag:focus {
+			outline-offset: -1px;
+		}
+	}
+}
+
+// Print styles
+@media print {
+	.qld__tag {
+		color: #000 !important;
+		border-color: #000 !important;
+	}
+}

package/src/components/_global/css/user_location/component.scss

@@ -0,0 +1,38 @@
+.qld__use-current-location-btn {
+    border: 0;
+    background-color: transparent;
+    margin-top: 15px;
+    position: relative;
+    margin-left: 4px;
+    padding-left: pxToRem(35);
+    cursor: pointer;
+    line-height: 20px;
+    vertical-align: middle;
+    color: var(--QLD-color-light-text);
+
+    &:disabled {
+        cursor: not-allowed;
+    }
+
+    &:before {
+        content: "";
+        position: absolute;
+        display: block;
+        left: 0px;
+        top: 0px;
+        width: 22px;
+        height: 22px;
+        border: 2px solid var(--QLD-color-light-heading);
+    }
+
+    &.active {
+        &:before {
+            background-image: QLD-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">' +
+            '<path d="M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z"/>' +
+            '</svg>');
+            background-size: 16px 14px;
+            background-position: 1px 3px;
+            background-repeat: no-repeat;
+        }
+    }
+}

package/src/components/_global/css/version/component.scss

@@ -0,0 +1,47 @@
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+// Version styles
+//--------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+.qld__version {
+    @include QLD-space(margin, 2unit 0);
+    @include QLD-media(lg) {
+        @include QLD-space(margin, 0 0 2unit 2unit);
+        float: right;
+        width: 33%;
+
+        .qld__body h1 + & {
+            @include QLD-space(margin-top, -1.5unit);
+        }
+    }
+    &__status {
+        position: relative;
+        @include QLD-space(margin-top, 1.1875unit);
+        @include QLD-space(padding, 0.625unit 0.75unit 0.625unit 2.875unit);
+        @include QLD-space(
+            border-top,
+            solid var(--QLD-color-light-border) 0.0625unit
+        );
+        .svg-inline--fa {
+            position: absolute;
+            @include QLD-space(left, 0.5625unit);
+            @include QLD-space(top, 50%);
+            transform: scale(0.75) translateY(-50%);
+            transform-origin: top;
+            &.fa-check-circle {
+                color: var(--QLD-color-light-designAccent);
+            }
+        }
+        small {
+            display: block;
+            @include QLD-space(margin-bottom, -0.125unit);
+        }
+    }
+    &__links {
+        @include QLD-space(
+            border-top,
+            solid var(--QLD-color-light-border) 0.0625unit
+        );
+        margin-top: 0 !important;
+        padding: 0.875rem 0 0 !important;
+    }
+}

package/src/components/_global/html/component.hbs

@@ -0,0 +1,108 @@
+<h1>{{manifest.component.name}}</h1>
+<!--@@ Component Version @@-->
+<div class="qld__version">
+    <h5 class="qld__version__heading">Version {{manifest.component.version}}</h5>
+        <div class="qld__version__status {{manifest.component.status}}">
+            <i class="far 
+            {{#ifCond mani-fest.component.status '==' 'In Development'}}
+            fa-code
+            {{/ifCond}}
+            {{#ifCond manifest.component.status '==' 'Pending Release'}}
+            fa-clock
+            {{/ifCond}}
+            {{#ifCond manifest.component.status '==' 'Released'}}
+            fa-check-circle
+            {{/ifCond}}
+            {{#ifCond manifest.component.status '==' 'Depricated'}}
+            fa-level-down-alt
+            {{/ifCond}}
+            {{#ifCond manifest.component.status '==' 'Removed'}}
+            fa-times
+            {{/ifCond}}
+            "></i>
+            <small>Status</small>
+            {{manifest.component.status}}
+        </div>
+</div>
+                
+<!--@@ Component Description @@-->
+<div class="qld__abstract">
+    <p>{{manifest.component.description}}</p>
+</div>
+
+<div class="qld__example">
+    <div role="tablist" aria-label="Component output">
+        <button role="tab" aria-selected="true" aria-controls="cp-tab--body" id="cp-heading--body" class="qld__example__title qld__tab qld__tab--selected">Output</button>
+        <button role="tab" aria-selected="false" aria-controls="cp-tab--html" id="cp-heading--html" class="qld__example__title qld__tab">HTML</button>
+    </div>
+    
+
+    <div role="tabpanel" id="cp-tab--body" aria-labelledby="cp-heading--body" class="qld__example__inline component_output qld__tab_panel" >
+        {{{component_output}}}
+    </div>
+
+    <div role="tabpanel" id="cp-tab--html" aria-labelledby="cp-heading--html" class="qld__example__inline qld__tab_panel" hidden="hidden">
+        <pre class="qld__example__html"><code class="component_output">{{component_output}}</code></pre>
+    </div>
+</div>
+
+
+<div class="qld__model_editor">
+    <script>
+        const componentModel = {{{jsonStringify manifest}}};
+        const component = '{{{component}}}';
+        const renderCallback = '{{{callback}}}';
+        const previewDelay = '{{{debounce}}}' ? Number('{{{debounce}}}') : 50;
+    </script>
+
+
+
+    {{#ifCond manifest.component.type '==' 'design'}}
+
+    {{else}}
+    <h3>Component Attributes</h3>
+    <div class="qld__fieldset">
+        <table class="qld__table qld__table--striped qld__table__attributes">
+            <thead class="qld__table__head">
+            <tr>
+                <th class="qld__table__header">Name</th>
+                <th class="qld__table__header">Friendly Name</th>
+                <th class="qld__table__header">Default</th>
+            </tr>
+            </thead>
+            <tbody class="qld__table__body">
+            {{#each manifest.component.data.metadata}}
+            <tr class="qld__table__row">
+                <td class="qld__table__cell">{{@key}}</td>
+                <td class="qld__table__cell">{{friendly_name}}</td>
+                <td class="qld__table__cell">
+                {{#ifCond type '==' 'metadata_field_text'}}
+                    <input type="text" name="{{@key}}" value="{{value}}" class="qld__model_field format-{{format}}">
+                {{/ifCond}}
+                {{#ifCond type '==' 'metadata_field_date'}}
+                    <input type="datetime-local" name="{{@key}}" value="{{value}}" class="qld__model_field">
+                {{/ifCond}}
+                {{#ifCond type '==' 'metadata_field_wysiwyg'}}
+                    <textarea name="{{@key}}" class="qld__model_field">{{value}}</textarea>
+                {{/ifCond}}
+                {{#ifCond type '==' 'metadata_field_textarea'}}
+                    <textarea name="{{@key}}" class="qld__model_field">{{value}}</textarea>
+                {{/ifCond}}
+                {{#ifCond type '==' 'metadata_field_related_asset'}}
+                    <input type="text" name="{{@key}}" value="{{value}}" class="qld__model_field">
+                {{/ifCond}}
+                {{#ifCond type '==' 'metadata_field_select'}}
+                    <select name="{{@key}}" class="qld__model_field">
+                        {{#each options}}
+                            <option value="{{@key}}" {{#ifCond @key '==' ../value}}selected{{/ifCond}}>{{this}}</option>
+                        {{/each}}
+                    </select>
+                {{/ifCond}}</td>
+            </tr>
+            {{/each}}
+            </tbody>
+        </table>      
+    </div>
+    {{/ifCond}}
+</div>
+

package/src/components/_global/html/ds_component.hbs

@@ -0,0 +1,30 @@
+<div id="ds_component_{{id}}" class="loading">
+    <div class="loader">Loading...</div>
+
+    <script>
+
+        // Array to store all Datastore components on the page
+        var dsComponents = dsComponents ? dsComponents : [];
+
+        // On Page Load
+        window.addEventListener('DOMContentLoaded', function () {
+            
+            var dsUrl = {{datastore}}.baseURL;
+
+            dsComponents.push({
+                id: '{{id}}',
+                dsUrl: dsUrl,
+                manifest: {{{jsonStringify manifest}}},
+                schema: {{#if schema}}{{{jsonStringify schema}}}{{else}}null{{/if}},
+                schemas: {{#if schemas}}{{{jsonStringify schemas}}}{{else}}null{{/if}},
+                collection: '{{collection}}',
+                component: '{{{component}}}',
+                renderCallback: '{{{callback}}}',
+                type: '{{type}}'
+            });
+        });
+        
+    </script>
+</div>
+
+

package/src/components/_global/html/head.html

@@ -0,0 +1,63 @@
+<!-- Metadata -->
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<!-- Imports -->
+<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Roboto+Mono&display=swap" rel="stylesheet"/>
+<link rel="stylesheet" href="https://use.typekit.net/fse2tsb.css" />
+<!-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> -->
+
+<script id="globals-loader" data-current='${JSON.stringify(require("/src/data/current.json"))}' data-site='${JSON.stringify(require("/src/data/site.json"))}'>
+    var current = JSON.parse(document.getElementById('globals-loader').getAttribute('data-current'));
+    var site = JSON.parse(document.getElementById('globals-loader').getAttribute('data-site'));
+    var userData = { "superAdmin": false, "hhsGroup": "darling-downs" }
+</script>
+
+<style>
+
+.qld__grid {
+        /* --QLD-color-light-siteTitle: #133653 ;
+        --QLD-color-light-designAccent:#D2624A; 
+        --QLD-color-light-heading: #12364F ;
+        --QLD-color-light-text: #333333 ;
+        --QLD-color-light-text__muted: #636363 ;
+        --QLD-color-light-link: #4469A8 ;
+        --QLD-color-light-link__visited: #375675 ;
+        --QLD-color-light-button__text: #FFFFFF ;
+        --QLD-color-light-button: #4469A8 ;
+        --QLD-color-light-button__hover: #375675 ;
+        --QLD-color-light-focus: #428F82 ;
+        --QLD-color-light-border: #EBEBEB ;
+        --QLD-color-light-background: #FFFFFF ;
+        --QLD-color-light-background__shade: #F8F9F9 ;
+        
+
+        --QLD-color-light-alt-button: #218291 ;
+        --QLD-color-light-alt-button__hover: #375675 ;
+        --QLD-color-light-alt-border: #61748B ; 
+        --QLD-color-light-alt-background: #EDF1F2 ;
+        --QLD-color-light-alt-background__shade: #E3EAEC ;
+        
+
+        --QLD-color-dark-siteTitle: #FFFFFF ;
+        --QLD-color-dark-designAccent: #D2624A ;
+        --QLD-color-dark-heading: #FFFFFF ;
+        --QLD-color-dark-text: #FFFFFF ;
+        --QLD-color-dark-text__muted: #E2EDFB ;
+        --QLD-color-dark-link: #FFFFFF ;
+        --QLD-color-dark-link__visited: #E2EDFB ;
+        --QLD-color-dark-button__text: #FFFFFF ;
+        --QLD-color-dark-button: #218291 ;
+        --QLD-color-dark-button__hover: #517A7F ;
+        --QLD-color-dark-focus: #52AF9F ;
+        --QLD-color-dark-border: #5687B5 ;
+        --QLD-color-dark-background: #132D4E ;
+        --QLD-color-dark-background__shade: #0A2343 ;
+
+        --QLD-color-dark-alt-button: #D2834A ;
+        --QLD-color-dark-alt-button__hover: #FA954C ;
+        --QLD-color-dark-alt-border: #5279A9 ;
+        --QLD-color-dark-alt-background: #061B37 ;
+        --QLD-color-dark-alt-background__shade: #041122 ; */
+}
+
+</style>

package/src/components/_global/html/scripts.html

@@ -0,0 +1,58 @@
+<script src="https://sdk.datastore.squiz.cloud/js/sdk-simulator.js"></script>
+<!-- <script src="https://sdk.datastore.squiz.cloud/js/sdk.js"></script> -->
+
+<script src="https://kit.fontawesome.com/fb2f2d4cd6.js" crossorigin="anonymous"></script>
+<!-- <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> -->
+
+<script src="externals/handlebars.min-v4.7.6.js"></script>
+<script src="externals/componentPreview.js"></script>
+<script src="externals/dsComponentLoader.js"></script>
+<script src="js/helpers.js"></script>
+
+<!-- Mapping -->
+    
+    <!-- Leaflet CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
+        integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
+        crossorigin="" />
+    <!-- Leaflet JS -->
+    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
+        integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
+        crossorigin=""></script>
+    <!-- Esri Leaflet JS -->
+    <script src="https://unpkg.com/esri-leaflet@3.0.1/dist/esri-leaflet.js"
+        integrity="sha512-JmpptMCcCg+Rd6x0Dbg6w+mmyzs1M7chHCd9W8HPovnImG2nLAQWn3yltwxXRM7WjKKFFHOAKjjF2SC4CgiFBg=="
+        crossorigin=""></script>
+    <!-- Esri Leaflet Vector Plugin JS -->
+    <script src="https://unpkg.com/esri-leaflet-vector@3.0.0/dist/esri-leaflet-vector.js"
+        integrity="sha512-i3LCZC/OnZR2VtZJ7ftXbZivyjPVBKeOqWuJ9SqaBnuiG18GyzTrHWYPgf1geE1LmI9yRENWSEI3jcpKx1dgqg=="
+        crossorigin=""></script>
+
+
+<script>
+    const serviceFinderData = new Datastore({
+        // serviceURL: 'http://0.0.0.0:7001/hXL8Q1uq', // Matt
+        //serviceURL: 'http://0.0.0.0:7001/afMhajMG', // Tom
+        serviceURL: 'http://0.0.0.0:7001/GbO0pTqv', // Julian
+        //serviceURL: 'https://au-a14fc409.datastore.squiz.cloud',
+        jwtURL: 'http://0.0.0.0:7001/__JWT/issueToken'
+    });
+
+    serviceFinderData.setSetting('jwtPayload', {
+        "username": "jdoe",
+        "fullName": "John Doe",
+        "dsAdmin": false,
+        "hhsGroup": "sunshine-coast",
+        "isPublic": false,
+        "currentHHS": true
+    });
+</script>
+
+<script src="externals/populateDatastoreSim.js"></script>
+
+<!-- Configure Default HHS -->
+<div id="qhealth__hhs" data-hhs="darling-downs"></div>
+
+<!-- <script type="text/javascript" src="https://qh-search.squiz.cloud/s/resources-global/thirdparty/typeahead-0.11.1/typeahead.bundle.min.js" async></script>
+<script type="text/javascript" src="https://qh-search.squiz.cloud/s/resources-global/thirdparty/handlebars-4.0.5/handlebars.min.js" async></script> -->
+<!-- <script type="text/javascript" src="https://qh-search.squiz.cloud/s/resources-global/js/funnelback.autocompletion-2.6.0.js" async></script> -->

package/src/components/_global/js/_polyfills/global.js

@@ -0,0 +1,18 @@
+// IE 11 polyfill for .matches
+if (!Element.prototype.matches) {
+    Element.prototype.matches = Element.prototype.msMatchesSelector ||
+        Element.prototype.webkitMatchesSelector;
+}
+
+// IE 11 polyfill for .closest
+if (!Element.prototype.closest) {
+    Element.prototype.closest = function (s) {
+        var el = this;
+
+        do {
+            if (Element.prototype.matches.call(el, s)) return el;
+            el = el.parentElement || el.parentNode;
+        } while (el !== null && el.nodeType === 1);
+        return null;
+    };
+}