npm - @ongov/ontario-design-system-component-library - Versions diffs - 5.0.0-alpha.6 → 6.0.0-alpha.1 - Mend

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

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

Files changed (2485) hide show

package/dist/components/ontario-search-box.js CHANGED Viewed

@@ -1,14 +1,13 @@
-import { p as proxyCustomElement, H, d as createEvent, h } from './p-846438ed.js';
-import { I as Input } from './p-7caacdde.js';
-import { O as OntarioIconSearch } from './p-fe2e0534.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-3fa830a3.js';
-import { t as translations } from './p-a5331e15.js';
-import { c as constructHintTextObject } from './p-e77d78ce.js';
-import { d as defineCustomElement$2 } from './p-226df20b.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
+import { I as Input } from './p-BgeHsfjA.js';
+import { O as OntarioIconSearch } from './p-CXfntdg5.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CJ1sSyqT.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { c as constructHintTextObject } from './p-CkusvkRr.js';
+import { d as defineCustomElement$2 } from './p-Br8HOVJk.js';
 const ontarioSearchBoxCss =
-	'@charset "UTF-8";.ontario-search__input.ontario-input:focus,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.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-search__container{max-width:34rem;margin-bottom:2.5rem}.ontario-search__input-container{position:relative}.ontario-search__input.ontario-input{border:2px solid #1a1a1a;margin-bottom:0;height:3rem;padding-left:0.75rem;padding-right:8.5rem;width:100%}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:0.75rem;right:6rem;height:1.5rem;width:1.5rem;color:#1a1a1a;margin:0;padding:0.25rem;background-size:1.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009ADB}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5.5rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#0066CC;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478F;color:#FFFFFF}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009ADB;background-color:#00478F;color:#FFFFFF}.ontario-search__submit:active{background-color:#002142;color:#FFFFFF}.ontario-search__submit svg{fill:#FFFFFF;margin-right:0;margin-bottom:0;width:2rem;height:2rem;display:inline-block;vertical-align:middle;overflow:hidden}@media screen and (max-width: 40em){.ontario-search__submit{width:3rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}';
-const OntarioSearchBoxStyle0 = ontarioSearchBoxCss;
+	'@charset "UTF-8";.ontario-search__input.ontario-input:focus,.ontario-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1>.ontario-label--heading,.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1,h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.ontario-form-group:last-of-type{margin-bottom:3rem}.ontario-fieldset__legend{color:#1a1a1a;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;margin:0 0 1rem 0;line-height:1.5;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-fieldset__legend{font-size:1.125rem;line-height:1.56}}.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{letter-spacing:0.02rem;line-height:1.2}.ontario-fieldset__legend--large h1,.ontario-fieldset__legend--heading h1{display:inline-block;margin:0}@media screen and (max-width: 40em){.ontario-fieldset__legend--large,.ontario-fieldset__legend--heading{font-size:1.4375rem;line-height:1.39}}.ontario-fieldset__legend--large{font-size:1.75rem}.ontario-fieldset__legend-required-flag,.ontario-fieldset__legend-optional-flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-fieldset__legend-required-flag:before,.ontario-fieldset__legend-optional-flag:before{content:" "}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-label{cursor:pointer;color:#1a1a1a;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1.1875rem;font-weight:700;line-height:1.5;margin:0 0 1rem 0;max-width:38.75em;white-space:normal;width:100%;hyphens:auto}@media screen and (max-width: 40em){.ontario-label{font-size:1.125rem;line-height:1.56}}.ontario-label--large{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.2;max-width:26.25em}@media screen and (max-width: 40em){.ontario-label--large{font-size:1.4375rem;line-height:1.39}}h1>.ontario-label--heading{display:inline-block;margin:0}.ontario-label__flag{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400}.ontario-label__flag:before{content:" "}.ontario-input{border:2px solid #1a1a1a;border-radius:4px;box-sizing:border-box;color:#1a1a1a;display:block;font-size:1rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;line-height:1.5;margin:0 0 2.5rem;max-width:48rem;width:100%;padding:0.625rem 1rem;transition:box-shadow 0.1s ease-in-out}.ontario-input--2-char-width{max-width:8ex}.ontario-input--3-char-width{max-width:10ex}.ontario-input--4-char-width{max-width:12ex}.ontario-input--5-char-width{max-width:14ex}.ontario-input--7-char-width{max-width:17ex}.ontario-input--10-char-width{max-width:23ex}.ontario-input--20-char-width{max-width:41ex}.ontario-form-group:last-of-type{margin-bottom:2.5rem}.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-search__container{max-width:34rem;margin-bottom:2.5rem}.ontario-search__input-container{position:relative}.ontario-search__input.ontario-input{border:2px solid #1a1a1a;margin-bottom:0;height:3rem;padding-left:0.75rem;padding-right:8.5rem;width:100%}.ontario-search__input.ontario-input:invalid+input[type=reset]{display:none}input[type=reset].ontario-search__reset{position:absolute;display:flex;align-items:center;top:0.75rem;right:6rem;height:1.5rem;width:1.5rem;color:#1a1a1a;margin:0;padding:0.25rem;background-size:1.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);background-position:center center;background-repeat:no-repeat;background-color:transparent;outline:none;border:none;cursor:pointer}input[type=reset].ontario-search__reset:focus{box-shadow:inset 0 0 0 4px #009ADB}@media screen and (max-width: 40em){input[type=reset].ontario-search__reset{right:5.5rem}}.ontario-search__submit{border:0;border-radius:0 3px 3px 0;background-color:#0066CC;color:#1a1a1a;display:flex;justify-content:center;align-items:center;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;font-size:1.125rem;width:5rem;line-height:1.56;position:absolute;right:0;bottom:0;top:0;cursor:pointer}.ontario-search__submit:hover{background-color:#00478F;color:#FFFFFF}.ontario-search__submit:focus{outline:none;box-shadow:0 0 0 4px #009ADB;background-color:#00478F;color:#FFFFFF}.ontario-search__submit:active{background-color:#002142;color:#FFFFFF}.ontario-search__submit svg{fill:#FFFFFF;margin-right:0;margin-bottom:0;width:2rem;height:2rem;display:inline-block;vertical-align:middle;overflow:hidden}@media screen and (max-width: 40em){.ontario-search__submit{width:3rem}}input[type=search].ontario-search__input::-webkit-search-decoration,input[type=search].ontario-search__input::-webkit-search-cancel-button,input[type=search].ontario-search__input::-webkit-search-results-button,input[type=search].ontario-search__input::-webkit-search-results-decoration{-webkit-appearance:none}';
 const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioSearchBox extends H {
@@ -16,11 +15,11 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.searchOnSubmit = createEvent(this, 'searchOnSubmit', 7);
-			this.inputOnInput = createEvent(this, 'inputOnInput', 7);
-			this.inputOnChange = createEvent(this, 'inputOnChange', 7);
-			this.inputOnBlur = createEvent(this, 'inputOnBlur', 7);
-			this.inputOnFocus = createEvent(this, 'inputOnFocus', 7);
+			this.searchOnSubmit = createEvent(this, 'searchOnSubmit');
+			this.inputOnInput = createEvent(this, 'inputOnInput');
+			this.inputOnChange = createEvent(this, 'inputOnChange');
+			this.inputOnBlur = createEvent(this, 'inputOnBlur');
+			this.inputOnFocus = createEvent(this, 'inputOnFocus');
 		}
 		get element() {
 			return this;
@@ -49,18 +48,18 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 		 */
 		value;
 		/**
-    * The text to display as the input label
-    *
-    * @example
-    * <ontario-search-box
-    *      caption='{
-                    "captionText": "Search directory",
-                    "captionType": "default"
-                    }'
-                required = "true"
-    >
-    </ontario-search-box>
-    */
+		 * The text to display as the input label
+		 *
+		 * @example
+		 * <ontario-search-box
+		 *   caption='{
+		 *			"captionText": "Search directory",
+		 *			"captionType": "default"
+		 *		}'
+		 *		required = "true"
+		 * >
+		 * </ontario-search-box>
+		 */
 		caption;
 		/**
 		 * This is used to determine whether the dropdown list is required or not.
@@ -253,7 +252,7 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			return h(
 				'form',
 				{
-					key: '8a8bfd7fdd089c43a11287e0115d3bf2b5a3bd21',
+					key: 'e3c63d000fc89ce897173eb391ae1f384433039e',
 					name: 'searchForm',
 					id: 'ontario-search-form-container',
 					class:
@@ -263,16 +262,16 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 				this.captionState.getCaption(searchInputFieldId, false, true) /* Note the _required_ text is disabled */,
 				this.internalHintText &&
 					h('ontario-hint-text', {
-						key: 'e98d90f117beefbe3378190ea46779204d20749f',
+						key: '7db0a418e18506a0d30519127faa32bc6008c4e0',
 						hint: this.internalHintText.hint,
 						hintContentType: this.internalHintText.hintContentType,
 						ref: (el) => (this.hintTextRef = el),
 					}),
 				h(
 					'div',
-					{ key: '8af1a575ea9b9c50515f1852118e1e93094410de', class: 'ontario-search__input-container' },
+					{ key: '47611717f5f3ede04d4506230c5bd9ba06072edd', class: 'ontario-search__input-container' },
 					h(Input, {
-						'key': '2bfb969811790843eee9d5b2e0299e54f138eb51',
+						'key': '0a86eb7189908a9e3822ded6fcba0fac20596f11',
 						'aria-describedBy': this.hintTextId,
 						'type': 'search',
 						'name': 'search',
@@ -289,7 +288,7 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 						'value': this.getValue(),
 					}),
 					h(Input, {
-						key: '95bad003daf908fe81f4076f7f070ccd7acabb9c',
+						key: '1523d69dcd1f37861eb5911dbc0a52779502a795',
 						className: 'ontario-search__reset',
 						id: 'ontario-search-reset',
 						type: 'reset',
@@ -299,13 +298,13 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 					h(
 						'button',
 						{
-							key: '226cb3d74887d03690e3f42b461136f5921cf5cf',
+							key: '3a7ad4366efaef64fd32f77a2ef1b871af15cb48',
 							class: 'ontario-search__submit',
 							type: 'submit',
 							id: 'ontario-search-box__submit',
 							onClick: (e) => this.handleSearch(e),
 						},
-						h('span', { key: '8bd9fc49df75ba6b6bd15eac19c77d2f6c01c747', innerHTML: OntarioIconSearch }),
+						h('span', { key: '9e8068e22e63dae3f6cafbfcaaccbbc466976121', innerHTML: OntarioIconSearch }),
 					),
 				),
 			);
@@ -318,7 +317,7 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioSearchBoxStyle0;
+			return ontarioSearchBoxCss;
 		}
 	},
 	[
@@ -330,12 +329,12 @@ const OntarioSearchBox$1 = /*@__PURE__*/ proxyCustomElement(
 			value: [1025],
 			caption: [1],
 			required: [4],
-			performSearch: [16],
+			performSearch: [16, 'perform-search'],
 			hintText: [1, 'hint-text'],
-			customOnInput: [16],
-			customOnChange: [16],
-			customOnBlur: [16],
-			customOnFocus: [16],
+			customOnInput: [16, 'custom-on-input'],
+			customOnChange: [16, 'custom-on-change'],
+			customOnBlur: [16, 'custom-on-blur'],
+			customOnFocus: [16, 'custom-on-focus'],
 			internalHintText: [32],
 			captionState: [32],
 			hintTextId: [32],
@@ -373,5 +372,6 @@ const OntarioSearchBox = OntarioSearchBox$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioSearchBox, defineCustomElement };
+//# sourceMappingURL=ontario-search-box.js.map
 //# sourceMappingURL=ontario-search-box.js.map

package/dist/components/ontario-search-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-search-box.js","mappings":"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","names":["OntarioSearchBox"],"sources":["src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { Input } from '../../utils/common/input/input';\nimport { Language } from '../../utils/common/language-types';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport { Hint } from '../../utils/common/common.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\n\n@Component({\n\ttag: 'ontario-search-box',\n\tstyleUrl: 'ontario-search-box.scss',\n\tshadow: true,\n})\nexport class OntarioSearchBox {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/*\n\t This Ref is used get a direct reference to the hint text element\n\t /\n\tprivate hintTextRef?: HTMLOntarioHintTextElement;\n\n\t/\n\t This Ref is used get a direct reference to the search input element\n\t /\n\tprivate inputFieldRef?: HTMLInputElement;\n\n\t/\n\t The language of the component.\n\t * This is used for translations. If none is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/\n\t The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t The value of the search term.\n\t * This is optional.\n\t /\n\t@Prop({ mutable: true }) value?: string;\n\n\t/\n\t The text to display as the input label\n\t\n\t @example\n\t* <ontario-search-box\n\t* caption='{\n\t\t\t\t\t\"captionText\": \"Search directory\",\n\t\t\t\t\t\"captionType\": \"default\"\n\t\t\t\t\t}'\n\t\t\t\trequired = \"true\"\n\t>\n\t</ontario-search-box>\n\t/\n\t@Prop() caption: Caption \| string;\n\n\t/\n\t This is used to determine whether the dropdown list is required or not.\n\t * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t /\n\t@Prop() required?: boolean = false;\n\n\t/\n\t This Function to perform a search operation.\n\t * This function will be called when the search submit button is triggered.\n\t * The value argument is used for as search term to use for the search operation. This parameter is optional.\n\t * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.\n\t \n\t @example\n\t * <ontario-search-box\n\t \t id=\"ontario-search-box\"\n\t \t caption='Search directory'\n\t * ></ontario-search-box>\n\t \n\t <script>\n\t \twindow.addEventListener('load', () => {\n\t \t\tconst searchBox = document.getElementById('ontario-search-box');\n\t \t\tsearchBox.performSearch = async (value) => {\n\t \t\t\tconsole.log('Performing search with value:', value);\n\t \t\t};\n\t \t});\n\t * </script>\n\t /\n\t@Prop() performSearch?: (value?: string) => Promise<void>;\n\n\t/\n\t Used to include the ontario-hint-text component for the search-box.\n\t * This is optional.\n\t /\n\t@Prop() hintText?: string \| Hint;\n\n\t/\n\t Used to add a custom function to the input onInput event.\n\t /\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onChange event.\n\t /\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onBlur event.\n\t /\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onFocus event.\n\t /\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Emitted when the search is submitted.\n\t * Below is an example on how to hook into the event to get the event details.\n\t \n\t @example\n\t \t<script>\n\t \t\tdocument.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {\n\t \t \t\tconst searchValue = event.detail;\n\t \t\t\tconsole.log('Search submitted with value:', searchValue);\n\t \t };\n\t \t</script>\n\t /\n\t@Event() searchOnSubmit: EventEmitter<string>;\n\n\t/\n\t Emitted when a input occurs when an input has been changed.\n\t /\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t The hint text options are re-assigned to the internalHintText array.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t Watch for changes to the `hintText` prop.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `language` prop to render either the English or French translations\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId;\n\t\tthis.parseHintText();\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/\n\t Function to handle input events and the information pertaining to the input to emit.\n\t /\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement \| null;\n\n\t\t// Update the component value to match the value of the input element.\n\t\tthis.value = input?.value;\n\n\t\tthis.internals?.setFormValue?.(this.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\t/\n\t handleSearch function is called when the search submit button is clicked\n\t /\n\tasync handleSearch(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.searchOnSubmit.emit(this.value);\n\t\tthis.performSearch && (await this.performSearch(this.value));\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string \| number {\n\t\treturn this.value ?? '';\n\t}\n\n\t/\n\t This function ensures that the focus returns to the search input field when the reset button is clicked.\n\t /\n\tprivate setFocus(inputRef?: HTMLInputElement) {\n\t\tif (inputRef) {\n\t\t\tinputRef.focus();\n\t\t}\n\t}\n\n\t/\n\t when the reset button is clicked this function gets called\n\t /\n\thandleFocus = () => {\n\t\tthis.setFocus(this.inputFieldRef);\n\t};\n\n\trender() {\n\t\tconst searchInputFieldId: string = 'ontario-search-input-field';\n\t\treturn (\n\t\t\t<form\n\t\t\t\tname=\"searchForm\"\n\t\t\t\tid=\"ontario-search-form-container\"\n\t\t\t\tclass=\"ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6\"\n\t\t\t\tnovalidate\n\t\t\t>\n\t\t\t\t{this.captionState.getCaption(searchInputFieldId, false, true) / Note the _required_ text is disabled */}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"ontario-search__input-container\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tid={searchInputFieldId}\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\t\tclassName=\"ontario-search__input ontario-input\"\n\t\t\t\t\t\trequired={true}\n\t\t\t\t\t\tref={(el) => (this.inputFieldRef = el)}\n\t\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"ontario-search__reset\"\n\t\t\t\t\t\tid=\"ontario-search-reset\"\n\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\tvalue=\"\"\n\t\t\t\t\t\tonClick={() => this.handleFocus()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"ontario-search__submit\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tid=\"ontario-search-box__submit\"\n\t\t\t\t\t\tonClick={(e) => this.handleSearch(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span innerHTML={OntarioIconSearch} />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-search-box.js","mappings":"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","names":["OntarioSearchBox","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-search-box/ontario-search-box.scss?tag=ontario-search-box&encapsulation=shadow","src/components/ontario-search-box/ontario-search-box.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/fonts.variables' as fonts;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/line-heights.variables' as lineheight;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tfocusPlaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../../styles/form.scss';\n\n$ontario-input-height: globalFunctions.px-to-rem(48);\n$ontario-search-icon-size: 2rem;\n$ontario-reset-icon-size: 1.5rem;\n$ontario-search-button-width: 5rem;\n$ontario-search-button-width--mobile: 3rem;\n$ontario-search-input-padding: 8.5rem;\n$ontario-search-input-padding--mobile: 7.75rem;\n$ontario-search-desktop-width: 34rem;\n$ontario-search-mobile-width: 20.5rem;\n\n.ontario-search__container {\n\tmax-width: $ontario-search-desktop-width;\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-search__input-container {\n\tposition: relative;\n}\n\n.ontario-search__input.ontario-input {\n\tborder: 2px solid colours.$ontario-colour-black;\n\tmargin-bottom: spacing.$spacing-0;\n\theight: $ontario-input-height;\n\tpadding-left: spacing.$spacing-3;\n\tpadding-right: $ontario-search-input-padding;\n\twidth: 100%;\n\n\t&:invalid + input[type='reset'] {\n\t\tdisplay: none;\n\t}\n\n\t&:focus {\n\t\t@extend %ontario-focus;\n\t}\n}\n\ninput[type='reset'].ontario-search__reset {\n\tposition: absolute;\n\tdisplay: flex;\n\talign-items: center;\n\ttop: spacing.$spacing-3;\n\tright: $ontario-search-button-width + spacing.$spacing-4;\n\theight: $ontario-reset-icon-size;\n\twidth: $ontario-reset-icon-size;\n\tcolor: colours.$ontario-colour-black;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-1;\n\tbackground-size: $ontario-reset-icon-size;\n\tbackground-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTE5IDYuNEwxNy42IDUgMTIgMTAuNiA2LjQgNSA1IDYuNGw1LjYgNS42TDUgMTcuNiA2LjQgMTlsNS42LTUuNiA1LjYgNS42IDEuNC0xLjQtNS42LTUuNkwxOSA2LjR6IiBmaWxsPSIjMDAwIi8+PC9zdmc+);\n\tbackground-position: center center;\n\tbackground-repeat: no-repeat;\n\tbackground-color: transparent;\n\toutline: none;\n\tborder: none;\n\tcursor: pointer;\n\n\t&:focus {\n\t\tbox-shadow: inset 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tright: $ontario-search-button-width--mobile + spacing.$spacing-7;\n\t}\n}\n\n.ontario-search__submit {\n\tborder: 0;\n\tborder-radius: 0 3px 3px 0;\n\tbackground-color: colours.$ontario-colour-link;\n\tcolor: colours.$ontario-colour-black;\n\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\n\tfont-family: fonts.$ontario-font-open-sans;\n\tfont-weight: fontWeights.$ontario-font-weights-semi-bold;\n\tfont-size: 1.125rem;\n\twidth: $ontario-search-button-width;\n\tline-height: lineheight.$ontario-line-height-8;\n\n\tposition: absolute;\n\tright: spacing.$spacing-0;\n\tbottom: spacing.$spacing-0;\n\ttop: spacing.$spacing-0;\n\tcursor: pointer;\n\n\t&:hover {\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:focus {\n\t\toutline: none;\n\t\tbox-shadow: 0 0 0 globalVariables.$global-radius colours.$ontario-colour-focus;\n\t\tbackground-color: colours.$ontario-colour-link--hover;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\t&:active {\n\t\tbackground-color: colours.$ontario-colour-link--active;\n\t\tcolor: colours.$ontario-colour-white;\n\t}\n\n\tsvg {\n\t\tfill: colours.$ontario-colour-white;\n\t\tmargin-right: spacing.$spacing-0;\n\t\tmargin-bottom: spacing.$spacing-0;\n\t\twidth: $ontario-search-icon-size;\n\t\theight: $ontario-search-icon-size;\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: $ontario-search-button-width--mobile;\n\t}\n}\n\n// remove default cancel button for input with type=\"search\"\ninput[type='search'].ontario-search__input::-webkit-search-decoration,\ninput[type='search'].ontario-search__input::-webkit-search-cancel-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-button,\ninput[type='search'].ontario-search__input::-webkit-search-results-decoration {\n\t-webkit-appearance: none;\n}\n","import { Component, Prop, h, Element, EventEmitter, Event, AttachInternals, State, Watch } from '@stencil/core';\nimport { Input } from '../../utils/common/input/input';\nimport { Language } from '../../utils/common/language-types';\nimport OntarioIconSearch from '../ontario-icon/assets/ontario-icon-search.svg';\nimport { Hint } from '../../utils/common/common.interface';\nimport { handleInputEvent } from '../../utils/events/event-handler';\nimport {\n\tInputFocusBlurEvent,\n\tEventType,\n\tInputInteractionEvent,\n\tInputInputEvent,\n} from '../../utils/events/event-handler.interface';\nimport { Caption } from '../../utils/common/input-caption/caption.interface';\nimport { InputCaption } from '../../utils/common/input-caption/input-caption';\nimport { default as translations } from '../../translations/global.i18n.json';\nimport { constructHintTextObject } from '../../utils/components/hints/hints';\n\n@Component({\n\ttag: 'ontario-search-box',\n\tstyleUrl: 'ontario-search-box.scss',\n\tshadow: true,\n})\nexport class OntarioSearchBox {\n\t@Element() element: HTMLElement;\n\t@AttachInternals() internals: ElementInternals;\n\n\t/*\n\t This Ref is used get a direct reference to the hint text element\n\t /\n\tprivate hintTextRef?: HTMLOntarioHintTextElement;\n\n\t/\n\t This Ref is used get a direct reference to the search input element\n\t /\n\tprivate inputFieldRef?: HTMLInputElement;\n\n\t/\n\t The language of the component.\n\t * This is used for translations. If none is passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language = 'en';\n\n\t/\n\t The unique identifier of the search-box component. This is optional - if no ID is passed, one will be generated.\n\t /\n\t@Prop({ mutable: true }) elementId?: string;\n\n\t/\n\t The value of the search term.\n\t * This is optional.\n\t /\n\t@Prop({ mutable: true }) value?: string;\n\n\t/\n\t The text to display as the input label\n\t \n\t @example\n\t * <ontario-search-box\n\t * caption='{\n\t \t\t\t\"captionText\": \"Search directory\",\n\t \t\t\t\"captionType\": \"default\"\n\t \t\t}'\n\t \t\trequired = \"true\"\n\t * >\n\t * </ontario-search-box>\n\t /\n\t@Prop() caption: Caption \| string;\n\n\t/\n\t This is used to determine whether the dropdown list is required or not.\n\t * This prop gets passed to the InputCaption utility to display either an optional or required flag in the label.\n\t * If no prop is set, it will default to false (optional).\n\t /\n\t@Prop() required?: boolean = false;\n\n\t/\n\t This Function to perform a search operation.\n\t * This function will be called when the search submit button is triggered.\n\t * The value argument is used for as search term to use for the search operation. This parameter is optional.\n\t * The performSearch prop can be set dynamically using JavaScript, allowing you to define custom search functionality when the search form is submitted.\n\t \n\t @example\n\t * <ontario-search-box\n\t \t id=\"ontario-search-box\"\n\t \t caption='Search directory'\n\t * ></ontario-search-box>\n\t \n\t <script>\n\t \twindow.addEventListener('load', () => {\n\t \t\tconst searchBox = document.getElementById('ontario-search-box');\n\t \t\tsearchBox.performSearch = async (value) => {\n\t \t\t\tconsole.log('Performing search with value:', value);\n\t \t\t};\n\t \t});\n\t * </script>\n\t /\n\t@Prop() performSearch?: (value?: string) => Promise<void>;\n\n\t/\n\t Used to include the ontario-hint-text component for the search-box.\n\t * This is optional.\n\t /\n\t@Prop() hintText?: string \| Hint;\n\n\t/\n\t Used to add a custom function to the input onInput event.\n\t /\n\t@Prop() customOnInput?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onChange event.\n\t /\n\t@Prop() customOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onBlur event.\n\t /\n\t@Prop() customOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onFocus event.\n\t /\n\t@Prop() customOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Emitted when the search is submitted.\n\t * Below is an example on how to hook into the event to get the event details.\n\t \n\t @example\n\t \t<script>\n\t \t\tdocument.getElementById('ontario-search-box').addEventListener('searchOnSubmit', (event) => {\n\t \t \t\tconst searchValue = event.detail;\n\t \t\t\tconsole.log('Search submitted with value:', searchValue);\n\t \t };\n\t \t</script>\n\t /\n\t@Event() searchOnSubmit: EventEmitter<string>;\n\n\t/\n\t Emitted when a input occurs when an input has been changed.\n\t /\n\t@Event() inputOnInput: EventEmitter<InputInputEvent>;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\t@Event() inputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\t@Event() inputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\t@Event() inputOnFocus: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t The hint text options are re-assigned to the internalHintText array.\n\t /\n\t@State() private internalHintText: Hint;\n\n\t/\n\t Instantiate an InputCaption object for internal logic use\n\t /\n\t@State() private captionState: InputCaption;\n\n\t/\n\t Used for the `aria-describedby` value of the dropdown list. This will match with the id of the hint text.\n\t /\n\t@State() hintTextId: string \| null \| undefined;\n\n\t/\n\t Watch for changes to the `hintText` prop.\n\t \n\t If a `hintText` prop is passed, the `constructHintTextObject` function will convert it to the correct format, and set the result to the `internalHintText` state.\n\t /\n\t@Watch('hintText')\n\tprivate parseHintText() {\n\t\tif (this.hintText) {\n\t\t\tconst hintTextObject = constructHintTextObject(this.hintText);\n\t\t\tthis.internalHintText = hintTextObject;\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `caption` prop.\n\t \n\t The caption will be run through the InputCaption constructor to convert it to the correct format, and set the result to the `captionState` state.\n\t * @param newValue: Caption \| string\n\t /\n\t@Watch('caption')\n\tprivate updateCaptionState(newValue: Caption \| string) {\n\t\tthis.captionState = new InputCaption(\n\t\t\tthis.element.tagName,\n\t\t\tnewValue,\n\t\t\ttranslations,\n\t\t\tthis.language,\n\t\t\tfalse,\n\t\t\tthis.required,\n\t\t);\n\t}\n\n\t/\n\t Watch for changes to the `language` prop to render either the English or French translations\n\t /\n\t@Watch('language')\n\tupdateLanguage() {\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/\n\t If a `hintText` prop is passed, the id generated from it will be set to the internal `hintTextId` state to match with the select `aria-describedBy` attribute.\n\t /\n\tasync componentDidLoad() {\n\t\tthis.hintTextId = await this.hintTextRef?.getHintTextId();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.elementId = this.elementId;\n\t\tthis.parseHintText();\n\t\tthis.updateCaptionState(this.caption);\n\t}\n\n\t/\n\t Function to handle input events and the information pertaining to the input to emit.\n\t /\n\tprivate handleEvent(event: globalThis.Event, eventType: EventType) {\n\t\tconst input = event.target as HTMLInputElement \| null;\n\n\t\t// Update the component value to match the value of the input element.\n\t\tthis.value = input?.value;\n\n\t\tthis.internals?.setFormValue?.(this.value ?? '');\n\n\t\thandleInputEvent(\n\t\t\tevent,\n\t\t\teventType,\n\t\t\tinput,\n\t\t\tthis.inputOnChange,\n\t\t\tthis.inputOnFocus,\n\t\t\tthis.inputOnBlur,\n\t\t\tthis.inputOnInput,\n\t\t\t'input',\n\t\t\tthis.customOnChange,\n\t\t\tthis.customOnFocus,\n\t\t\tthis.customOnBlur,\n\t\t\tthis.customOnInput,\n\t\t\tthis.element,\n\t\t);\n\t}\n\n\t/\n\t handleSearch function is called when the search submit button is clicked\n\t /\n\tasync handleSearch(event: MouseEvent) {\n\t\tevent.preventDefault();\n\t\tthis.searchOnSubmit.emit(this.value);\n\t\tthis.performSearch && (await this.performSearch(this.value));\n\t}\n\n\tpublic getId(): string {\n\t\treturn this.elementId ?? '';\n\t}\n\n\tprivate getValue(): string \| number {\n\t\treturn this.value ?? '';\n\t}\n\n\t/\n\t This function ensures that the focus returns to the search input field when the reset button is clicked.\n\t /\n\tprivate setFocus(inputRef?: HTMLInputElement) {\n\t\tif (inputRef) {\n\t\t\tinputRef.focus();\n\t\t}\n\t}\n\n\t/\n\t when the reset button is clicked this function gets called\n\t /\n\thandleFocus = () => {\n\t\tthis.setFocus(this.inputFieldRef);\n\t};\n\n\trender() {\n\t\tconst searchInputFieldId: string = 'ontario-search-input-field';\n\t\treturn (\n\t\t\t<form\n\t\t\t\tname=\"searchForm\"\n\t\t\t\tid=\"ontario-search-form-container\"\n\t\t\t\tclass=\"ontario-search__container ontario-columns ontario-small-10 ontario-medium-offset-3 ontario-medium-6 ontario-large-offset-0 ontario-large-6\"\n\t\t\t\tnovalidate\n\t\t\t>\n\t\t\t\t{this.captionState.getCaption(searchInputFieldId, false, true) / Note the _required_ text is disabled */}\n\t\t\t\t{this.internalHintText && (\n\t\t\t\t\t<ontario-hint-text\n\t\t\t\t\t\thint={this.internalHintText.hint}\n\t\t\t\t\t\thintContentType={this.internalHintText.hintContentType}\n\t\t\t\t\t\tref={(el) => (this.hintTextRef = el)}\n\t\t\t\t\t></ontario-hint-text>\n\t\t\t\t)}\n\n\t\t\t\t<div class=\"ontario-search__input-container\">\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-describedBy={this.hintTextId}\n\t\t\t\t\t\ttype=\"search\"\n\t\t\t\t\t\tname=\"search\"\n\t\t\t\t\t\tid={searchInputFieldId}\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\taria-autocomplete=\"none\"\n\t\t\t\t\t\tclassName=\"ontario-search__input ontario-input\"\n\t\t\t\t\t\trequired={true}\n\t\t\t\t\t\tref={(el) => (this.inputFieldRef = el)}\n\t\t\t\t\t\tonInput={(e) => this.handleEvent(e, EventType.Input)}\n\t\t\t\t\t\tonChange={(e) => this.handleEvent(e, EventType.Change)}\n\t\t\t\t\t\tonBlur={(e) => this.handleEvent(e, EventType.Blur)}\n\t\t\t\t\t\tonFocus={(e) => this.handleEvent(e, EventType.Focus)}\n\t\t\t\t\t\tvalue={this.getValue()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tclassName=\"ontario-search__reset\"\n\t\t\t\t\t\tid=\"ontario-search-reset\"\n\t\t\t\t\t\ttype=\"reset\"\n\t\t\t\t\t\tvalue=\"\"\n\t\t\t\t\t\tonClick={() => this.handleFocus()}\n\t\t\t\t\t></Input>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"ontario-search__submit\"\n\t\t\t\t\t\ttype=\"submit\"\n\t\t\t\t\t\tid=\"ontario-search-box__submit\"\n\t\t\t\t\t\tonClick={(e) => this.handleSearch(e)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<span innerHTML={OntarioIconSearch} />\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-step-indicator.js CHANGED Viewed

@@ -1,11 +1,10 @@
-import { p as proxyCustomElement, H, h } from './p-846438ed.js';
-import { v as validateLanguage } from './p-edb765a1.js';
-import { t as translations } from './p-a5331e15.js';
-import { d as defineCustomElement$2 } from './p-318e2fc9.js';
+import { p as proxyCustomElement, H, h } from './index.js';
+import { b as validateLanguage } from './p-CNqFEifG.js';
+import { t as translations } from './p-DgMhpSmi.js';
+import { d as defineCustomElement$2 } from './p-yMyefDI8.js';
 const ontarioStepIndicatorCss =
-	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;line-height:1.5555555556;margin:0 1.75rem 1.5rem 0;min-width:10rem;padding:0.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#0066CC;color:#FFFFFF}.ontario-button--primary:hover{background-color:#00478F;color:#FFFFFF}.ontario-button--primary:focus{background-color:#00478F;color:#FFFFFF;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#FFFFFF;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--primary:visited{color:#FFFFFF}.ontario-button--secondary{background-color:#FFFFFF;border:2px solid #0066CC;color:#0066CC;padding-top:0.5rem;padding-bottom:0.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478F;color:#00478F;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--secondary:visited{color:#0066CC}.ontario-button--tertiary{background-color:transparent;color:#0066CC;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478F;text-decoration:underline;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:visited{color:#0066CC}.ontario-button--internalThemeDark{background-color:#1a1a1a;border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:#4d4d4d}.ontario-button--internalThemeDark:focus{background-color:#4d4d4d;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:#4d4d4d;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}.ontario-step-indicator{margin-bottom:2.5rem}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--with-back-button--true,.ontario-step-indicator .ontario-step-indicator--without-back-button,.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;align-items:center;justify-content:space-between}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--without-back-button{justify-content:flex-end}.ontario-step-indicator .ontario-h4{margin:1.25rem 0}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-h4{margin:1rem 0;text-align:right}}.ontario-step-indicator .ontario-button.ontario-button--tertiary{display:flex;align-items:center;margin:0.75rem 0;padding-left:0.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-button.ontario-button--tertiary{width:unset}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 0.375rem 0 0;padding:0;min-width:24px;min-height:24px}.ontario-step-indicator hr{padding:0;margin:0}';
-const OntarioStepIndicatorStyle0 = ontarioStepIndicatorCss;
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,h1,.ontario-h1{font-style:normal;font-weight:700;text-rendering:optimizeLegibility;margin-bottom:1rem;font-feature-settings:normal;font-family:"Raleway Modified", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif}h1,.ontario-h1{font-size:2rem;letter-spacing:0.04rem;line-height:1.29;margin:2.5rem 0 1.5rem 0;max-width:70rem}@media screen and (min-width: 40em){h1,.ontario-h1{font-size:2.5rem;letter-spacing:0.04rem;line-height:1.2}}h2,.ontario-h2{font-size:1.6875rem;letter-spacing:0.03rem;line-height:1.37;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h2,.ontario-h2{font-size:2.0625rem;letter-spacing:0.02rem;line-height:1.33}}h3,.ontario-h3{font-size:1.4375rem;letter-spacing:0.02rem;line-height:1.39;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h3,.ontario-h3{font-size:1.75rem;letter-spacing:0.02rem;line-height:1.43}}h4,.ontario-h4{font-size:1.25rem;letter-spacing:0.03rem;line-height:1.5;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h4,.ontario-h4{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}h5,.ontario-h5{font-size:1.125rem;letter-spacing:0.03rem;line-height:1.56;margin:0 0 0.75rem 0;max-width:48rem}@media screen and (min-width: 40em){h5,.ontario-h5{font-size:1.1875rem;letter-spacing:0.025rem;line-height:1.5}}h6,.ontario-h6{font-size:1rem;line-height:1.56;letter-spacing:0.03rem;max-width:48rem;margin:0 0 0.75rem 0}@media screen and (min-width: 40em){h6,.ontario-h6{font-size:1rem;letter-spacing:0.025rem;line-height:1.5}}.ontario-lead-statement{font-size:1.25rem;line-height:1.6;max-width:70rem}@media screen and (min-width: 40em){.ontario-lead-statement{font-size:1.375rem}}html{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem}body{font-size:1rem;line-height:1.6;background-color:#FFFFFF;color:#1a1a1a;margin:0}p{font-size:inherit;margin-bottom:1.25rem;text-rendering:optimizeLegibility;margin:0 0 1.5rem 0}cite{font-style:italic;line-height:inherit}strong{font-weight:700;line-height:inherit}*,*::before,*::after{box-sizing:inherit}main p,main p:not(.ontario-lead-statement),main dd,main li{max-width:48rem}hr{border:0;padding:0;margin:2.5rem 0;border-bottom:4px solid #cccccc}hr.ontario-hr--dark{border-bottom:4px solid #1a1a1a}a{color:#0066CC;text-decoration:underline}a:visited{color:#551A8B}a:hover{color:#00478F}a:active{color:#002142}a:focus{-moz-box-shadow:0 0 0 4px #009ADB;-webkit-box-shadow:0 0 0 4px #009ADB;box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:all 0.1s ease-in-out}p{margin:0 0 1.5rem 0}p+h1,p+h2,p+h3,p+h4,p+h5,p+h6,ul+h1,ul+h2,ul+h3,ul+h4,ul+h5,ul+h6,ol+h1,ol+h2,ol+h3,ol+h4,ol+h5,ol+h6,h1+h2,h2+h3,h3+h4,h4+h5,h5+h6{margin-top:2rem}p code,td code,li code{line-height:2.25rem}input[type=text],input[type=number],input[type=email],input[type=date],input[type=color],input[type=search],input[type=tel],textarea{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}input[type=checkbox]+label,input[type=radio]+label{font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size:1rem;font-weight:400;margin-left:0;margin-right:0}fieldset{border:0;margin:0;padding:0;page-break-inside:avoid}legend,label{display:block;margin:0}select{background-origin:initial;height:auto;-webkit-appearance:none;-moz-appearance:none}ul,ol{padding:0}ul{margin-left:2rem}ul li{padding:0 0 0.75rem 0}ol{margin-left:1.75rem}ol li{padding:0 0 0.75rem 0.25rem}ul li:last-child,ol li:last-child{padding-bottom:0}ul[class*=columns-] li:last-child,ol[class*=columns-] li:last-child{padding-bottom:0.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 2rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 1.75rem}p+ul,p+ol{margin-top:-0.75rem}@media screen and (min-width: 40em){ul{margin:0.5rem 0 1.5rem 3rem}ol{margin:0.5rem 0 1.5rem 2.75rem}ul ul,ol ul{margin:0.5rem 0 0.5rem 3rem}ul ol,ol ol{margin:0.5rem 0 0.5rem 2.75rem}}.ontario-button:focus,.ontario-button:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-button{border:none;border-radius:4px;box-sizing:border-box;box-shadow:none;display:inline-block;font-size:1.125rem;font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:600;line-height:1.5555555556;margin:0 1.75rem 1.5rem 0;min-width:10rem;padding:0.625rem 1.5rem;text-align:center;text-decoration:none;cursor:pointer}@media screen and (max-width: 40em){.ontario-button{margin-right:0;display:block;width:100%}}.ontario-button .ontario-icon{margin-right:4px}.ontario-button--primary{background-color:#0066CC;color:#FFFFFF}.ontario-button--primary:hover{background-color:#00478F;color:#FFFFFF}.ontario-button--primary:focus{background-color:#00478F;color:#FFFFFF;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--primary:active{background-color:#002142;color:#FFFFFF;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--primary:visited{color:#FFFFFF}.ontario-button--secondary{background-color:#FFFFFF;border:2px solid #0066CC;color:#0066CC;padding-top:0.5rem;padding-bottom:0.5rem}.ontario-button--secondary:hover{background-color:#e0f0ff;border-color:#00478F;color:#00478F}.ontario-button--secondary:focus{background-color:#e0f0ff;border-color:#00478F;color:#00478F;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--secondary:active{background-color:#c2e0ff;border-color:#002142;color:#002142;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--secondary:visited{color:#0066CC}.ontario-button--tertiary{background-color:transparent;color:#0066CC;text-decoration:underline}.ontario-button--tertiary:hover{background-color:#e8e8e8;color:#00478F;text-decoration:underline}.ontario-button--tertiary:focus{background-color:#e8e8e8;color:#00478F;text-decoration:underline;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:active{background-color:#d1d1d1;color:#002142;text-decoration:underline;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--tertiary:visited{color:#0066CC}.ontario-button--internalThemeDark{background-color:#1a1a1a;border:2px solid #FFFFFF;color:#FFFFFF}.ontario-button--internalThemeDark:hover{background-color:#4d4d4d}.ontario-button--internalThemeDark:focus{background-color:#4d4d4d;transition:background-color 0.2s ease-out, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:active{background-color:#4d4d4d;transition:background-color 0s, box-shadow 0.1s ease-in-out}.ontario-button--internalThemeDark:visited{color:#0066CC}.ontario-step-indicator{margin-bottom:2.5rem}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--with-back-button--true,.ontario-step-indicator .ontario-step-indicator--without-back-button,.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;align-items:center;justify-content:space-between}.ontario-step-indicator .ontario-step-indicator--with-back-button--false,.ontario-step-indicator .ontario-step-indicator--without-back-button{justify-content:flex-end}.ontario-step-indicator .ontario-h4{margin:1.25rem 0}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-h4{margin:1rem 0;text-align:right}}.ontario-step-indicator .ontario-button.ontario-button--tertiary{display:flex;align-items:center;margin:0.75rem 0;padding-left:0.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-button.ontario-button--tertiary{width:unset}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 0.375rem 0 0;padding:0;min-width:24px;min-height:24px}.ontario-step-indicator hr{padding:0;margin:0}';
 const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioStepIndicator extends H {
@@ -75,17 +74,17 @@ const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'div',
-				{ key: '4e4bc3d532d200fe27e0ea5153404515d67a50a9', class: 'ontario-step-indicator' },
+				{ key: '99b28d54588042901db733dc07515778730104e0', class: 'ontario-step-indicator' },
 				h(
 					'div',
-					{ key: '08d05bed5c4ba11f4dcf3026429a395b8df34fdd', class: 'ontario-row' },
+					{ key: '4d7d0de7f7573d237eb1efdb189d47aa8edb0c97', class: 'ontario-row' },
 					h(
 						'div',
-						{ key: 'd5112ae4a7e493f55f2e36698efb8fdeae1094ab', class: 'ontario-columns ontario-small-12' },
+						{ key: '59beefde92218fac06ea12335937a7eaa05f4a05', class: 'ontario-columns ontario-small-12' },
 						h(
 							'div',
 							{
-								key: 'e9b994c4056f7f1059e279a426e0c6fc383666bd',
+								key: '6f6b3b31ad381ec965e24d2d0cb71fcb87a55e8e',
 								class: `ontario-step-indicator--with-back-button--${this.showBackButton}`,
 							},
 							this.showBackButton === true &&
@@ -93,11 +92,11 @@ const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 								h(
 									'button',
 									{
-										key: 'b6b7863719ff323655307a2a4382ec0c334cbf3c',
+										key: 'f81596ff5ef6e6c53921be03dd9d2156b6bebbfd',
 										class: 'ontario-button ontario-button--tertiary',
 										onClick: (e) => this.handleCustomOnClick(e),
 									},
-									h('ontario-icon-chevron-left', { key: '076c150b27302c23abd3f3965d5b0403b23d888e', colour: 'blue' }),
+									h('ontario-icon-chevron-left', { key: 'a7f93e91eb046d3927abd6c10db07302e1aa09a8', colour: 'blue' }),
 									this.translations.stepIndicator.back[`${this.language}`],
 								),
 							this.showBackButton === true &&
@@ -105,11 +104,11 @@ const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 								h(
 									'a',
 									{
-										key: 'bc3b0099da8f3093c3934dba6647f5fe85e53bf2',
+										key: 'dcb41f75d9074ac2a2e423f75f5eafd1a628a221',
 										class: 'ontario-button ontario-button--tertiary',
 										href: this.backButtonUrl,
 									},
-									h('ontario-icon-chevron-left', { key: '5198d8103499c6062dd73b9fc1a5d2c45b726476', colour: 'blue' }),
+									h('ontario-icon-chevron-left', { key: '6d396d47d555552128c442d96e0f90ed8a1d2290', colour: 'blue' }),
 									this.translations.stepIndicator.back[`${this.language}`],
 								),
 							this.percentageComplete
@@ -133,13 +132,13 @@ const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 										this.numberOfSteps,
 									),
 						),
-						h('hr', { key: 'ce73508f420886268f04b9007b8b9930e21ff856' }),
+						h('hr', { key: '50951805695a30af40d20f7500f8dc8ede620f71' }),
 					),
 				),
 			);
 		}
 		static get style() {
-			return OntarioStepIndicatorStyle0;
+			return ontarioStepIndicatorCss;
 		}
 	},
 	[
@@ -151,7 +150,7 @@ const OntarioStepIndicator$1 = /*@__PURE__*/ proxyCustomElement(
 			currentStep: [2, 'current-step'],
 			numberOfSteps: [2, 'number-of-steps'],
 			percentageComplete: [2, 'percentage-complete'],
-			customOnClick: [16],
+			customOnClick: [16, 'custom-on-click'],
 			language: [1025],
 			translations: [32],
 		},
@@ -186,5 +185,6 @@ const OntarioStepIndicator = OntarioStepIndicator$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioStepIndicator, defineCustomElement };
+//# sourceMappingURL=ontario-step-indicator.js.map
 //# sourceMappingURL=ontario-step-indicator.js.map

package/dist/components/ontario-step-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-step-indicator.js","mappings":";;;;;AAAA,MAAM,uBAAuB,GAAG,uxPAAuxP,CAAC;AACxzP,mCAAe,uBAAuB;;MCSzBA,sBAAoB;;;;;;;;;;;;IAQxB,cAAc,GAAa,KAAK,CAAC;;;;;;;IAQjC,aAAa,CAAU;;;;IAKvB,WAAW,CAAU;;;;IAKrB,aAAa,CAAU;;;;IAMvB,kBAAkB,CAAU;;;;;;;IAQ5B,aAAa,CAAqC;;;;;IAMjC,QAAQ,CAAY;;;;IAM7C,oBAAoB,CAAC,KAA4B;QAChD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;YACnB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;SACxC;KACD;IAGD,2BAA2B,CAAC,KAA4B;QACvD,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;KACxC;IAEQ,YAAY,GAAQ,YAAY,CAAC;IAElC,mBAAmB,GAAG,CAAC,CAAmB;QACjD,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;KAC5C,CAAC;IAEF,iBAAiB;QAChB,IAAI,CAAC,QAAQ,GAAG,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;KAChD;IAED,MAAM;QACL,QACC,4DAAK,KAAK,EAAC,wBAAwB,IAClC,4DAAK,KAAK,EAAC,aAAa,IACvB,4DAAK,KAAK,EAAC,kCAAkC,IAC5C,4DAAK,KAAK,EAAE,6CAA6C,IAAI,CAAC,cAAc,EAAE,IAC5E,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,aAAa,KACnD,+DAAQ,KAAK,EAAC,yCAAyC,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAClG,kFAA2B,MAAM,EAAC,MAAM,GAA6B,EACpE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACjD,CACT,EACA,IAAI,CAAC,cAAc,KAAK,IAAI,IAAI,IAAI,CAAC,aAAa,KAClD,0DAAG,KAAK,EAAC,yCAAyC,EAAC,IAAI,EAAE,IAAI,CAAC,aAAa,IAC1E,kFAA2B,MAAM,EAAC,MAAM,GAA6B,EACpE,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACtD,CACJ,EACA,IAAI,CAAC,kBAAkB,IACvB,YAAM,KAAK,EAAC,YAAY,IACtB,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,QAAQ,KAAK,IAAI,GAAG,GAAG,GAAG,0BAAoB,EAAE,GAAG,EACxD,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CACvD,KAEP,YAAM,KAAK,EAAC,YAAY,IACtB,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAQ,IAAI,CAAC,WAAW,EAAE,GAAG,EACrF,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,YAAQ,IAAI,CAAC,aAAa,CAC3E,CACP,CACI,EACN,4DAAM,CACD,CACD,CACD,EACL;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioStepIndicator"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/*\n Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-step-indicator.js","mappings":"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","names":["OntarioStepIndicator","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-step-indicator/ontario-step-indicator.scss?tag=ontario-step-indicator&encapsulation=shadow","src/components/ontario-step-indicator/ontario-step-indicator.tsx"],"sourcesContent":["@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/_global.elements.scss';\n@use '../ontario-button/ontario-button.scss';\n\n$ontario-icon-size: 24px;\n\n.ontario-step-indicator {\n\tmargin-bottom: spacing.$spacing-7;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n.ontario-step-indicator .ontario-step-indicator--with-back-button--true,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button,\n.ontario-step-indicator .ontario-step-indicator--with-back-button {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.ontario-step-indicator .ontario-step-indicator--with-back-button--false,\n// Fractal component style coverage ↓\n.ontario-step-indicator .ontario-step-indicator--without-back-button {\n\tjustify-content: flex-end;\n}\n\n.ontario-step-indicator .ontario-h4 {\n\tmargin: (spacing.$spacing-4 + spacing.$spacing-1) 0;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin: spacing.$spacing-4 0;\n\t\ttext-align: right;\n\t}\n}\n\n/*\n Tertiary button defaults are overridden to achieve the mini-button specifications\n* width is unset in small screen size to remove unnecessary space being added to the button\n* min-width and max-width are set for small screen size to ensure the \"back\" button doesn't break and protrude into the text to the right\n/\n.ontario-step-indicator .ontario-button.ontario-button--tertiary {\n\tdisplay: flex;\n\talign-items: center;\n\tmargin: spacing.$spacing-3 spacing.$spacing-0;\n\tpadding-left: spacing.$spacing-2;\n\tpadding-right: spacing.$spacing-4;\n\tmin-width: spacing.$spacing-8;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: unset;\n\t}\n\n\t.ontario-icon {\n\t\tmargin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;\n\t\tpadding: spacing.$spacing-0;\n\t\tmin-width: $ontario-icon-size;\n\t\tmin-height: $ontario-icon-size;\n\t}\n}\n\n.ontario-step-indicator hr {\n\tpadding: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n}\n","import { Component, Prop, Element, h, State, Listen } from '@stencil/core';\nimport { Language } from '../../utils/common/language-types';\nimport { validateLanguage } from '../../utils/validation/validation-functions';\nimport translations from '../../translations/global.i18n.json';\n\n@Component({\n\ttag: 'ontario-step-indicator',\n\tstyleUrl: 'ontario-step-indicator.scss',\n\tshadow: true,\n})\nexport class OntarioStepIndicator {\n\t@Element() host: HTMLElement;\n\n\t/\n\t A boolean value to determine whether or not the back button is displayed for the step indicator.\n\t \n\t This is optional. If no prop is passed, it will default to `false`.\n\t /\n\t@Prop() showBackButton?: boolean = false;\n\n\t/\n\t URL for the back element to set a path for where the link will lead.\n\t \n\t If a URL is passed in, the back element will display as an anchor tag.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() backButtonUrl?: string;\n\n\t/\n\t A number value to indicate which step the user is currently on.\n\t /\n\t@Prop() currentStep?: number;\n\n\t/\n\t A number value to indicate to the user the total number of steps the form has.\n\t /\n\t@Prop() numberOfSteps?: number;\n\n\t/\n\t A number value to indicate to the user the percentage of the form that has been completed.\n\t /\n\n\t@Prop() percentageComplete?: number;\n\n\t/\n\t Used to add a custom function to the back button onClick event.\n\t \n\t If this function is passed in, the back element will display as a button.\n\t * The back element will require either the backButtonURL prop or the customOnClick prop to be passed in order for the back element to display.\n\t /\n\t@Prop() customOnClick?: (event: globalThis.Event) => void;\n\n\t/\n\t The language of the component.\n\t * This is used for translations, and is by default set through event listeners checking for a language property from the header. If none are passed, it will default to English.\n\t /\n\t@Prop({ mutable: true }) language?: Language;\n\n\t/\n\t This listens for the `setAppLanguage` event sent from the test language toggler when it is is connected to the DOM. It is used for the initial language when the input component loads.\n\t */\n\t@Listen('setAppLanguage', { target: 'window' })\n\thandleSetAppLanguage(event: CustomEvent<Language>) {\n\t\tif (!this.language) {\n\t\t\tthis.language = validateLanguage(event);\n\t\t}\n\t}\n\n\t@Listen('headerLanguageToggled', { target: 'window' })\n\thandleHeaderLanguageToggled(event: CustomEvent<Language>) {\n\t\tthis.language = validateLanguage(event);\n\t}\n\n\t@State() translations: any = translations;\n\n\tprivate handleCustomOnClick = (e: globalThis.Event) => {\n\t\tthis.customOnClick && this.customOnClick(e);\n\t};\n\n\tcomponentWillLoad() {\n\t\tthis.language = validateLanguage(this.language);\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div class=\"ontario-step-indicator\">\n\t\t\t\t<div class=\"ontario-row\">\n\t\t\t\t\t<div class=\"ontario-columns ontario-small-12\">\n\t\t\t\t\t\t<div class={`ontario-step-indicator--with-back-button--${this.showBackButton}`}>\n\t\t\t\t\t\t\t{this.showBackButton === true && !this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<button class=\"ontario-button ontario-button--tertiary\" onClick={(e) => this.handleCustomOnClick(e)}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.showBackButton === true && this.backButtonUrl && (\n\t\t\t\t\t\t\t\t<a class=\"ontario-button ontario-button--tertiary\" href={this.backButtonUrl}>\n\t\t\t\t\t\t\t\t\t<ontario-icon-chevron-left colour=\"blue\"></ontario-icon-chevron-left>\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.back[`${this.language}`]}\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{this.percentageComplete ? (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.percentageComplete}\n\t\t\t\t\t\t\t\t\t{this.language === 'en' ? '%' : <span> %</span>}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.complete[`${this.language}`]}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span class=\"ontario-h4\">\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.step[`${this.language}`]} {this.currentStep}{' '}\n\t\t\t\t\t\t\t\t\t{this.translations.stepIndicator.of[`${this.language}`]} {this.numberOfSteps}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<hr />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-table.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, g as getAssetPath } from './p-846438ed.js';
-import { a as ConsoleType, C as ConsoleMessageClass } from './p-b2019a19.js';
-import { e as extractValuesByKey, o as organizeObjectKeys, b as removeObjectsBySpecificKey } from './p-083804e2.js';
+import { p as proxyCustomElement, H, h, getAssetPath } from './index.js';
+import { C as ConsoleMessageClass, a as ConsoleType } from './p-CJXRCL8b.js';
+import { e as extractValuesByKey, o as organizeObjectKeys, a as removeObjectsBySpecificKey } from './p-DQi-JVyL.js';
 const minimumGridColumns = 1;
 const maximumGridColumns = 12;
@@ -68,7 +68,6 @@ function validateTableRowOptions(options) {
 const ontarioTableCss =
 	'.ontario-table-container{position:relative;margin:0.5rem 0 2.5rem}.ontario-table-div{background:linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 70%) 0 100%, linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%), linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);background-repeat:no-repeat;background-size:2.5rem 100%, 2.5rem 100%, 0.875rem 100%, 0.875rem 100%;background-position:0 0, 100%, 0 0, 100%;background-attachment:local, local, scroll, scroll;overflow-x:auto}@media screen and (max-width: 40em){.ontario-table-div{overflow-x:scroll}}.ontario-table-scroll--wrapper{height:20px;overflow-x:auto;overflow-y:hidden;display:block}.ontario-table-container table{border-collapse:collapse;display:table;font-size:1.0625rem;font-weight:400;line-height:1.625rem}.ontario-table-container table.ontario-table--full-container-width{display:table;width:100%}.ontario-table-container table.ontario-table--zebra-stripes-enabled tbody tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6):nth-child(even),.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6)~tr:nth-child(even){background-color:rgba(0, 0, 0, 0.0509803922)}@media screen and (max-width: 40em){.ontario-table-container table{font-size:1rem}}.ontario-table-container caption{background-color:rgba(0, 0, 0, 0.1019607843);display:table-caption;font-size:1.375rem;font-weight:700;line-height:2.1875rem;padding:1.125rem 1rem 1.125rem 1.5rem;text-align:left}@media screen and (max-width: 40em){.ontario-table-container caption{font-size:1.25rem;line-height:1.875rem;padding-left:1rem}}.ontario-table-container table thead{border:solid;border-width:0.1875rem 0;border-color:#1a1a1a;vertical-align:text-top}.ontario-table-container table thead th{font-size:1.125rem;line-height:1.5;margin:0;padding:1.75rem 1rem 1.75rem 1.5rem;text-align:left;text-size-adjust:none;-webkit-text-size-adjust:none}@media screen and (max-width: 40em){.ontario-table-container table thead th{font-size:1rem;line-height:1.3125rem;padding:1.5rem 0.5rem 1.5rem 1rem}}.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.75rem 1.5rem 1.75rem 1rem;text-align:right}@media screen and (max-width: 40em){.ontario-table-container table thead th.ontario-table-cell--numeric{padding:1.5rem 1rem 1.5rem 0.5rem}}.ontario-table-container table tbody{font-size:1rem;vertical-align:text-top}.ontario-table-container table tbody tr{border:solid;border-width:0.0625rem 0;border-color:rgba(0, 0, 0, 0.3019607843)}.ontario-table-container table tbody tr:last-child{border-width:0.1875rem 0;border-top-width:0;border-color:#1a1a1a}.ontario-table-container table tbody tr.ontario-table-row--highlight{background-color:rgba(225, 145, 0, 0.2352941176) !important}.ontario-table-container table tbody tr.ontario-table-row--highlight th{padding-left:1.5rem;display:flex;position:relative}.ontario-table-container table tbody tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{width:0.5rem;position:absolute;top:1.5rem;left:0}.ontario-table-container table tbody tr.ontario-table-row--subtotal{background-color:rgba(0, 123, 158, 0.1137254902) !important}.ontario-table-container tbody th,.ontario-table-container tfoot th,.ontario-table-container table td{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:0.025rem}.ontario-table-container tbody th,.ontario-table-container tfoot th{font-weight:700}@media screen and (max-width: 40em){.ontario-table-container tbody th,.ontario-table-container tfoot th{font-size:1rem;line-height:1.625rem;padding-right:0.5rem;padding-left:1rem}}.ontario-table-container table td img{vertical-align:top}@media screen and (max-width: 40em){.ontario-table-container table td img{max-width:none}}.ontario-table-container table td.ontario-table-cell--numeric{font-family:"Courier Prime", Courier, "Courier New", monospace;font-size:1.0625rem;padding:1.1875rem 1.5rem 1.1875rem 1rem;text-align:right}.ontario-table-container table td.ontario-table-cell--numeric strong{font-family:"Courier Prime", Courier, "Courier New", monospace}.ontario-table-container tbody tr.ontario-table-row--subtotal,.ontario-table-container tfoot tr{border:solid;border-width:0.1875rem 0;font-size:1rem;border-color:#1a1a1a}.ontario-table-container tbody tr.ontario-table-row--subtotal th,.ontario-table-container tfoot tr th{padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tbody tr.ontario-table-row--subtotal td,.ontario-table-container tfoot tr td{font-weight:700;padding:1.4375rem 1rem 1.4375rem 1.5rem}.ontario-table-container tfoot{vertical-align:text-top}.ontario-table-container tfoot tr{background-color:rgba(0, 119, 160, 0.337254902) !important}.ontario-table-header--column-span-1{min-width:8.33333vw}.ontario-table-header--column-span-2{min-width:16.66666vw}.ontario-table-header--column-span-3{min-width:25vw}.ontario-table-header--column-span-4{min-width:33.33333vw}.ontario-table-header--column-span-5{min-width:41.66666vw}.ontario-table-header--column-span-6{min-width:50vw}.ontario-table-header--column-span-7{min-width:58.33333vw}.ontario-table-header--column-span-8{min-width:66.66666vw}.ontario-table-header--column-span-9{min-width:75vw}.ontario-table-header--column-span-10{min-width:83.33333vw}.ontario-table-header--column-span-11{min-width:91.66666vw}.ontario-table-header--column-span-12{min-width:100vw}.ontario-table-container .ontario-table--condensed td{padding:0.75rem 1rem 0.75rem 1.5rem;text-align:left}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1.5rem 0.75rem 1rem;font-size:1.0625rem;text-align:right}.ontario-table-container .ontario-table--condensed tbody th,.ontario-table-container .ontario-table--condensed tfoot th{padding:0.75rem 1rem 0.75rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{top:1.0625rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 1rem 1rem 1.5rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1.5rem 1rem 1rem}@media screen and (max-width: 40em){.ontario-table-container .ontario-table--condensed td{padding:0.75rem 0.5rem 0.75rem 1rem;font-size:1rem}.ontario-table-container .ontario-table--condensed td.ontario-table-cell--numeric{padding:0.75rem 1rem 0.75rem 0.5rem}.ontario-table-container .ontario-table--condensed tbody th{padding:0.75rem 0.5rem 0.75rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal th,.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td,.ontario-table-container .ontario-table--condensed tfoot tr th,.ontario-table-container .ontario-table--condensed tfoot tr td{padding:1rem 0.5rem 1rem 1rem}.ontario-table-container .ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,.ontario-table-container .ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1rem 1rem 0.5rem}}';
-const OntarioTableStyle0 = ontarioTableCss;
 const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 	class OntarioTable extends H {
@@ -286,16 +285,16 @@ const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 			const columns = extractValuesByKey(this.tableColumnsState, 'key');
 			return h(
 				'div',
-				{ key: '9d04df8006e6bdfba1110f74fe8e1e2bb16e96af', class: 'ontario-table-container' },
+				{ key: '4f8842108ac7007576fe5ea75ec83de5cfbb2853', class: 'ontario-table-container' },
 				h(
 					'div',
 					{
-						key: '1d2bd821afbef0959cd3dd0ea91818a06173bd38',
+						key: '69130c9552b854e80d267728f947032222eacbe7',
 						class: 'ontario-table-scroll--wrapper',
 						ref: (el) => (this.tableScrollWrapper = el),
 					},
 					h('div', {
-						key: '62d162a39b939464b4438bd67d51093faaac578b',
+						key: 'cbd058d782c1d5a2aa70787af688b1fbd3607ba6',
 						class: 'ontario-table-scroll--div',
 						ref: (el) => (this.tableScrollDiv = el),
 					}),
@@ -303,21 +302,21 @@ const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 				h(
 					'div',
 					{
-						key: '9f5bdf6c32c6d21ab7ae166e5615f62a57b1c8f0',
+						key: '743c382ed2826bc49014af4d26283c812faf0199',
 						class: 'ontario-table-div',
 						ref: (el) => (this.table = el),
 					},
 					h(
 						'table',
-						{ key: '3a6335255edf36dc9f3e7498f5129e2c00884ed6', class: this.getTableClasses() },
-						this.caption && h('caption', { key: 'e9d58e89c6af824f30e6484926ff174b55f30816' }, this.caption),
+						{ key: '6a1f6baed2928d4508aeb3260e750d1b52a189fa', class: this.getTableClasses() },
+						this.caption && h('caption', { key: 'aa662bd73b1b2315642e624e31e288ea096f583c' }, this.caption),
 						this.tableColumnsState &&
 							h(
 								'thead',
-								{ key: 'c9449c1d7cfd52fcc6aa538f4b6d1eaf6f34907f' },
+								{ key: 'c6844d209ce5eb7e5220cec715c1b0d858bd03a4' },
 								h(
 									'tr',
-									{ key: '46715ab0f89bd15b4f5cf47357fe01e5fb42dd3a' },
+									{ key: '160fc34659ac78321cd3c9309282c42c4f83819e' },
 									this.tableColumnsState.map((columnData) => {
 										const columnClass = this.getColumnClasses(columnData);
 										return h('th', {
@@ -333,7 +332,7 @@ const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 						this.tableDataState &&
 							h(
 								'tbody',
-								{ key: '2557841f79c5c86047511e65f0f7eb311b111fee' },
+								{ key: '7774577acb957958aa317917636ee27c52ae10be' },
 								this.tableDataState.map((rowData) => {
 									const rowClass = rowData.highlight
 										? `ontario-table-row--highlight`
@@ -346,7 +345,7 @@ const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 						!!this.tableFooterState.length &&
 							h(
 								'tfoot',
-								{ key: 'e6f5d0e80a1abd98b5af6bac5527b5b2f63f9911' },
+								{ key: 'a293134380a5f33e008b05c419f371bd0c93308f' },
 								this.tableFooterState.map((footerData) => {
 									return this.generateTableDataHTML('tableData', footerData, columns, undefined);
 								}),
@@ -365,7 +364,7 @@ const OntarioTable$1 = /*@__PURE__*/ proxyCustomElement(
 			};
 		}
 		static get style() {
-			return OntarioTableStyle0;
+			return ontarioTableCss;
 		}
 	},
 	[
@@ -409,5 +408,6 @@ const OntarioTable = OntarioTable$1;
 const defineCustomElement = defineCustomElement$1;
 export { OntarioTable, defineCustomElement };
+//# sourceMappingURL=ontario-table.js.map
 //# sourceMappingURL=ontario-table.js.map