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

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

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 (1193) hide show

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

@@ -1,18 +1,18 @@
-import { p as proxyCustomElement, H } from './index.js';
+import { proxyCustomElement, HTMLElement } from '@stencil/core/internal/client';
 import {
 	i as isValidHeadingLevel,
 	a as isValidHighlightColour,
 	g as generateCalloutAside,
 	H as HeadingContentTypes,
-} from './p-dXtLd1df.js';
-import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+} from './callout-aside-helpers.js';
+import { v as validateValueAgainstArray } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
 const ontarioCalloutCss =
-	'@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-callout{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 0;background-color:#f2f2f2}.ontario-callout *{max-width:48rem}.ontario-callout *:last-child{margin-bottom:0.5rem}.ontario-callout__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
+	'@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-callout{border-left:0.25rem solid #367A76;padding:1.5rem;margin:2rem 0 2.5rem 0;background-color:#f2f2f2}.ontario-callout *{max-width:48rem}.ontario-callout *:last-child{margin-bottom:0.5rem}.ontario-callout__title{margin:0 0 1rem}.ontario-border-highlight--teal{border-color:#367A76 !important}.ontario-border-highlight--gold{border-color:#86743D !important}.ontario-border-highlight--yellow{border-color:#8A600D !important}.ontario-border-highlight--taupe{border-color:#7B725C !important}.ontario-border-highlight--green{border-color:#2B8737 !important}.ontario-border-highlight--lime{border-color:#5F8129 !important}.ontario-border-highlight--sky{border-color:#1080A6 !important}.ontario-border-highlight--blue{border-color:#0369ac !important}.ontario-border-highlight--purple{border-color:#92278F !important}';
 const OntarioCallout$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCallout extends H {
+	class OntarioCallout extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

package/dist/components/ontario-callout.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-callout.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,~~0vJAA0vJ~~;;~~MCsBvwJA~~,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,~~SAAAC~~,~~CAAA~~,CAAA;;;;;;AAC1B;;AAEG;AACsB,IAAA,WAAW;AAEpC;;AAEG;IACsB,kBAAkB,GAAuB,QAAQ;AAE1E;;AAEG;AACK,IAAA,cAAc;AAEtB;;;;;;;AAOG;AACK,IAAA,OAAO;AAEf;;AAEG;IACsB,eAAe,GAA4B,MAAM;AAE1E;;;AAGG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,qBAAqB;iBACtC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,qBAAqB;qBACtC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,qBAAqB;aACtC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,SAAS,EACT,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCallout","__stencil_proxyCustomElement"~~,"HTMLElement"~~],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/*\n\t The heading level of the callout heading.\n\t /\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/\n\t The type of the heading content. If no prop is passed, it will default to `string`.\n\t /\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/\n\t Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t /\n\t@Prop() headingContent?: string;\n\n\t/\n\t Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t \n\t HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t \n\t @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t /\n\t@Prop() content?: string;\n\n\t/\n\t Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t /\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/\n\t Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t /\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in the `headingContentType` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t /\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `highlightColour` prop.\n\t \n\t If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t /\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-callout.js","mappings":";;;;;AAAA,MAAM,iBAAiB,GAAG,mwJAAmwJ;;MCsBhxJA,gBAAc,iBAAAC,kBAAA,CAAA,MAAA,cAAA,SAAA,WAAA,CAAA;;;;;;AAC1B;;AAEG;AACsB,IAAA,WAAW;AAEpC;;AAEG;IACsB,kBAAkB,GAAuB,QAAQ;AAE1E;;AAEG;AACK,IAAA,cAAc;AAEtB;;;;;;;AAOG;AACK,IAAA,OAAO;AAEf;;AAEG;IACsB,eAAe,GAA4B,MAAM;AAE1E;;;AAGG;IAEH,mBAAmB,GAAA;AAClB,QAAA,IAAI,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;AACvB,YAAA,IAAI,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO,IAAI,CAAC,WAAW;AAElE,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;AACzC,YAAA,OAAO;AACL,iBAAA,kBAAkB;AAClB,iBAAA,gBAAgB,CAAC,CAAgB,aAAA,EAAA,IAAI,CAAC,WAAW,GAAG;iBACpD,cAAc,CAAC,KAAK;iBACpB,gBAAgB,CAAC,qBAAqB;iBACtC,cAAc,CAAC,4FAA4F;AAC3G,iBAAA,YAAY,EAAE;;;AAIlB;;;;;AAKG;IAEH,0BAA0B,GAAA;QACzB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,kBAAkB,EAAE,mBAAmB,CAAC;QACvF,IAAI,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,kBAAkB;;aACxB;AACN,YAAA,OAAO,IAAI,CAAC,eAAe,EAAE;;;AAI/B;;;;AAIG;IAEH,uBAAuB,GAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,IAAI,sBAAsB,CAAC,IAAI,CAAC,eAAe,CAAC;gBAAE,OAAO,IAAI,CAAC,eAAe;iBACxE;AACJ,gBAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;gBACzC;AACE,qBAAA,kBAAkB;AAClB,qBAAA,gBAAgB,CAAC,CAAoB,iBAAA,EAAA,IAAI,CAAC,eAAe,GAAG;qBAC5D,cAAc,CAAC,KAAK;qBACpB,gBAAgB,CAAC,qBAAqB;qBACtC,cAAc,CACd,oGAAoG;AAEpG,qBAAA,YAAY,EAAE;;;;AAKlB,QAAA,OAAO,MAAM;;AAGd;;;AAGG;IACK,eAAe,GAAA;AACtB,QAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;QACzC;AACE,aAAA,kBAAkB;aAClB,gBAAgB,CAAC,sBAAsB;aACvC,cAAc,CAAC,IAAI;aACnB,gBAAgB,CAAC,qBAAqB;aACtC,cAAc,CAAC,kCAAkC;aACjD,gBAAgB,CAAC,kBAAkB;aACnC,cAAc,CAAC,iCAAiC;aAChD,gBAAgB,CAAC,UAAU;aAC3B,cAAc,CAAC,aAAa;AAC5B,aAAA,YAAY,EAAE;AAChB,QAAA,QAAQ,IAAI,CAAC,kBAAkB,GAAG,QAAQ;;IAG3C,iBAAiB,GAAA;QAChB,IAAI,CAAC,uBAAuB,EAAE;QAC9B,IAAI,CAAC,mBAAmB,EAAE;QAC1B,IAAI,CAAC,0BAA0B,EAAE;;IAGlC,MAAM,GAAA;QACL,OAAO,oBAAoB,CAC1B,SAAS,EACT,IAAI,CAAC,kBAAkB,EACvB,IAAI,CAAC,WAAW,EAChB,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,OAAO,EACZ,IAAI,CAAC,eAAe,CACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCallout","__stencil_proxyCustomElement"],"sources":["src/components/ontario-callout/ontario-callout.scss?tag=ontario-callout&encapsulation=shadow","src/components/ontario-callout/ontario-callout.tsx"],"sourcesContent":["@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/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/4-elements/global.elements';\n\n.ontario-callout {\n\tborder-left: spacing.$spacing-1 solid colours.$ontario-colour-dark-teal;\n\tpadding: spacing.$spacing-5;\n\tmargin: spacing.$spacing-6 spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-0;\n\tbackground-color: colours.$ontario-greyscale-5;\n\n\t* {\n\t\tmax-width: globalVariables.$standard-width;\n\n\t\t&:last-child {\n\t\t\tmargin-bottom: spacing.$spacing-2;\n\t\t}\n\t}\n}\n\n.ontario-callout__title {\n\tmargin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-4;\n}\n\n$highlight-colours: (\n\t'teal': colours.$ontario-colour-dark-teal,\n\t'gold': colours.$ontario-colour-dark-gold,\n\t'yellow': colours.$ontario-colour-dark-yellow,\n\t'taupe': colours.$ontario-colour-dark-taupe,\n\t'green': colours.$ontario-colour-dark-green,\n\t'lime': colours.$ontario-colour-dark-lime,\n\t'sky': colours.$ontario-colour-dark-sky,\n\t'blue': colours.$ontario-colour-dark-blue,\n\t'purple': colours.$ontario-colour-dark-purple,\n);\n\n@each $colour-name, $hex in $highlight-colours {\n\t.ontario-border-highlight--#{$colour-name} {\n\t\tborder-color: $hex !important;\n\t}\n}\n","import { Component, Prop, Watch } from '@stencil/core';\n\nimport {\n\tCalloutAside,\n\tHeadingLevelOptions,\n\tHeadingContentType,\n\tHeadingContentTypes,\n\tHighlightColourOptions,\n} from '../../utils/components/callout-aside/callout-aside.interface';\nimport {\n\tisValidHighlightColour,\n\tgenerateCalloutAside,\n\tisValidHeadingLevel,\n} from '../../utils/components/callout-aside/callout-aside-helpers';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-callout',\n\tstyleUrl: 'ontario-callout.scss',\n\tshadow: true,\n})\nexport class OntarioCallout implements CalloutAside {\n\t/*\n\t The heading level of the callout heading.\n\t /\n\t@Prop({ mutable: true }) headingType?: HeadingLevelOptions;\n\n\t/\n\t The type of the heading content. If no prop is passed, it will default to `string`.\n\t /\n\t@Prop({ mutable: true }) headingContentType: HeadingContentType = 'string';\n\n\t/\n\t Text or HTML to be displayed as the heading of the callout. If the heading content should be displayed as HTML, the `headingContentType` needs to be set to `html`.\n\t /\n\t@Prop() headingContent?: string;\n\n\t/\n\t Optional text to be displayed as the content for the callout component. If a string is passed, it will automatically be nested in a paragraph tag.\n\t \n\t HTML content can also be passed as the child/children of the callout component if additional/different elements for the content are needed.\n\t \n\t @example\n\t * <ontario-callout headingType='h3' headingContent='This is the callout heading'><p>This is the first sentence of the callout content.</p><p>This is the second sentence of the callout content.</p></ontario-callout>\n\t /\n\t@Prop() content?: string;\n\n\t/\n\t Optional prop to choose the border colour of the callout. If none is passed, the default colour will be teal.\n\t /\n\t@Prop({ mutable: true }) highlightColour?: HighlightColourOptions = 'teal';\n\n\t/\n\t Watch for changes to the `headingType` prop.\n\t * This is for validation purposes to make sure the `headingType` matches one of the `HeadingLevelOptions`.\n\t /\n\t@Watch('headingType')\n\tvalidateHeadingType() {\n\t\tif (!!this.headingType) {\n\t\t\tif (isValidHeadingLevel(this.headingType)) return this.headingType;\n\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\treturn message\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(` headingType ${this.headingType} `)\n\t\t\t\t.addRegularText('for')\n\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t.addRegularText('is not a valid type. Please ensure your heading type matches one of the headingType types.')\n\t\t\t\t.printMessage();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes in the `headingContentType` variable for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingContentType` will be set to its default (`string`).\n\t * If a match is found in one of the array values then `headingContentType` will be set to the matching array key value.\n\t /\n\t@Watch('headingContentType')\n\tvalidateHeadingContentType() {\n\t\tconst isValid = validateValueAgainstArray(this.headingContentType, HeadingContentTypes);\n\t\tif (isValid) {\n\t\t\treturn this.headingContentType;\n\t\t} else {\n\t\t\treturn this.warnDefaultType();\n\t\t}\n\t}\n\n\t/\n\t Watch for changes to the `highlightColour` prop.\n\t \n\t If no `highlightColour` is passed, or if the `highlightColour` does not match the `highlightColour` options, a default value of 'teal' will be applied.\n\t /\n\t@Watch('highlightColour')\n\tvalidateHighlightColour() {\n\t\tif (this.highlightColour) {\n\t\t\tif (isValidHighlightColour(this.highlightColour)) return this.highlightColour;\n\t\t\telse {\n\t\t\t\tconst message = new ConsoleMessageClass();\n\t\t\t\tmessage\n\t\t\t\t\t.addDesignSystemTag()\n\t\t\t\t\t.addMonospaceText(` highlightColour ${this.highlightColour} `)\n\t\t\t\t\t.addRegularText('for')\n\t\t\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t\t\t.addRegularText(\n\t\t\t\t\t\t'does not match one of the valid highlightColour types. A default colour of `teal` will be applied.',\n\t\t\t\t\t)\n\t\t\t\t\t.printMessage();\n\t\t\t}\n\t\t}\n\n\t\t// if no highlight colour is passed, return 'teal'\n\t\treturn 'teal';\n\t}\n\n\t/\n\t Print the invalid `type` warning message.\n\t * @returns default type ('string')\n\t */\n\tprivate warnDefaultType() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' headingContentType ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-callout> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' string or html ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' string ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn (this.headingContentType = 'string');\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateHighlightColour();\n\t\tthis.validateHeadingType();\n\t\tthis.validateHeadingContentType();\n\t}\n\n\trender() {\n\t\treturn generateCalloutAside(\n\t\t\t'callout',\n\t\t\tthis.headingContentType,\n\t\t\tthis.headingType,\n\t\t\tthis.headingContent,\n\t\t\tthis.content,\n\t\t\tthis.highlightColour,\n\t\t);\n\t}\n}\n"],"version":3}

package/dist/components/ontario-card-collection.js CHANGED Viewed

@@ -1,11 +1,11 @@
-import { p as proxyCustomElement, H, h } from './index.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ConsoleMessageClass } from './console-message.js';
 const ontarioCardCollectionCss =
 	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;column-gap:2rem;row-gap:0;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 1.5rem)}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1rem)}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.33rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:100%}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1rem)}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:100%}}';
 const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCardCollection extends H {
+	class OntarioCardCollection extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

package/dist/components/ontario-card-collection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,80BAA80B;;MCSl2BA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,~~SAAAC~~,~~CAAA~~,CAAA;;;;;;;AAGjC;;;;AAIG;IACK,WAAW,GAAgB,CAAC;AAEpC;;;;AAIG;AACc,IAAA,gBAAgB;AAEjC;;;;AAIG;IAEH,mBAAmB,GAAA;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;AACnF,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,iBAAiB;iBAClC,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,kBAAkB;AACnC,iBAAA,cAAc,CACd,CACC,EAAA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E;iBAE5E,gBAAgB,CAAC,KAAK;iBACtB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC;;aACnB;AACN,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;;;AAI1C;;AAEG;IACK,QAAQ,GAAA;QACf,OAAO;;AAEqC,4CAAA,EAAA,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE;;IAGX,iBAAiB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;;IAG3B,MAAM,GAAA;AACL,QAAA,QACC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection","__stencil_proxyCustomElement"~~,"HTMLElement"~~],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tcolumn-gap: spacing.$spacing-6;\n\trow-gap: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t The number of cards to display per row.\n\t \n\t If no number is passed, it will default to 3.\n\t /\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set number of cards per row depending on validation result.\n\t /\n\t@State() private cardsPerRowState: number;\n\n\t/\n\t Watch for changes to the `cardsPerRow` property for validation purposes.\n\t \n\t If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t /\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) \|\| (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/\n\t @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n ontario-card-collection__container\n ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,80BAA80B;;MCSl2BA,uBAAqB,iBAAAC,kBAAA,CAAA,MAAA,qBAAA,SAAA,WAAA,CAAA;;;;;;;AAGjC;;;;AAIG;IACK,WAAW,GAAgB,CAAC;AAEpC;;;;AAIG;AACc,IAAA,gBAAgB;AAEjC;;;;AAIG;IAEH,mBAAmB,GAAA;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;AACnF,YAAA,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE;YACzC;AACE,iBAAA,kBAAkB;iBAClB,gBAAgB,CAAC,iBAAiB;iBAClC,cAAc,CAAC,IAAI;iBACnB,gBAAgB,CAAC,kBAAkB;AACnC,iBAAA,cAAc,CACd,CACC,EAAA,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E;iBAE5E,gBAAgB,CAAC,KAAK;iBACtB,cAAc,CAAC,cAAc;AAC7B,iBAAA,YAAY,EAAE;AAChB,YAAA,IAAI,CAAC,gBAAgB,GAAG,CAAC;;aACnB;AACN,YAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW;;;AAI1C;;AAEG;IACK,QAAQ,GAAA;QACf,OAAO;;AAEqC,4CAAA,EAAA,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE;;IAGX,iBAAiB,GAAA;QAChB,IAAI,CAAC,mBAAmB,EAAE;;IAG3B,MAAM,GAAA;AACL,QAAA,QACC,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAA,EACzB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection","__stencil_proxyCustomElement"],"sources":["src/components/ontario-card-collection/ontario-card-collection.scss?tag=ontario-card-collection&encapsulation=shadow","src/components/ontario-card-collection/ontario-card-collection.tsx"],"sourcesContent":["@use 'sass:math';\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\n.ontario-card-collection__container {\n\tdisplay: flex;\n\tflex-wrap: wrap;\n\tcolumn-gap: spacing.$spacing-6;\n\trow-gap: spacing.$spacing-0;\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-0;\n}\n\n.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card) {\n\twidth: calc(25% - 1.5rem);\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1rem);\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.33rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1rem);\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t}\n}\n","import { Component, Prop, Element, h, Watch, State } from '@stencil/core';\nimport { CardsPerRow } from './ontario-collection-card-types';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\n\n@Component({\n\ttag: 'ontario-card-collection',\n\tstyleUrl: 'ontario-card-collection.scss',\n\tshadow: true,\n})\nexport class OntarioCardCollection {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t The number of cards to display per row.\n\t \n\t If no number is passed, it will default to 3.\n\t /\n\t@Prop() cardsPerRow: CardsPerRow = 3;\n\n\t/\n\t Mutable variable, for internal use only.\n\t \n\t Set number of cards per row depending on validation result.\n\t /\n\t@State() private cardsPerRowState: number;\n\n\t/\n\t Watch for changes to the `cardsPerRow` property for validation purposes.\n\t \n\t If the user input is not a number or is a negative number then `cardsPerRow` will be set to its default (3).\n\t /\n\t@Watch('cardsPerRow')\n\tvalidateCardsPerRow() {\n\t\tif (isNaN(this.cardsPerRow) \|\| (!isNaN(this.cardsPerRow) && this.cardsPerRow <= 0)) {\n\t\t\tconst message = new ConsoleMessageClass();\n\t\t\tmessage\n\t\t\t\t.addDesignSystemTag()\n\t\t\t\t.addMonospaceText(' cards-per-row ')\n\t\t\t\t.addRegularText('on')\n\t\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t\t.addRegularText(\n\t\t\t\t\t`${\n\t\t\t\t\t\tisNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'\n\t\t\t\t\t}; only a positive number is allowed. The default number of cards per row: `,\n\t\t\t\t)\n\t\t\t\t.addMonospaceText(' 3 ')\n\t\t\t\t.addRegularText('was assumed.')\n\t\t\t\t.printMessage();\n\t\t\tthis.cardsPerRowState = 3;\n\t\t} else {\n\t\t\tthis.cardsPerRowState = this.cardsPerRow;\n\t\t}\n\t}\n\n\t/\n\t @returns the classes of the ontario cards based off the `cardType` and number of cards per row.\n\t */\n\tprivate getClass(): string {\n\t\treturn `\n ontario-card-collection__container\n ontario-card-collecton--cards-per-row-${this.cardsPerRowState}\n `.trim();\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardsPerRow();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<ul class={this.getClass()}>\n\t\t\t\t<slot></slot>\n\t\t\t</ul>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
-import { p as proxyCustomElement, H, h } from './index.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
-import { p as printArray } from './p-DQi-JVyL.js';
-import { v as validateValueAgainstArray } from './p-CNqFEifG.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { p as printArray } from './utils.js';
+import { v as validateValueAgainstArray } from './validation-functions.js';
 const layoutDirectionDefinitions = ['vertical', 'horizontal'];
 const headerColourDefinitions = [
@@ -36,10 +36,10 @@ const headerColourDefinitions = [
 const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'];
 const ontarioCardCss =
-	'.ontario-card__heading{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}.ontario-card__heading{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){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin-bottom:2.5rem;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer;background:#FFFFFF}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal .ontario-card--image-true{margin-top:0}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF;max-width:none}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__image-right .ontario-card--image-true .ontario-card__heading{border-radius:4px 0 0 0}.ontario-card__image-left .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__background--light-accent{background-color:#f2f2f2}.ontario-card__heading--light-accent{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:#1a1a1a}.ontario-card__heading--dark-accent{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-gold{background-color:#F0E7CC}.ontario-card__heading--light-gold{background-color:#F0E7CC;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-yellow{background-color:#F8E5C3}.ontario-card__heading--light-yellow{background-color:#F8E5C3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-taupe{background-color:#EBE7DB}.ontario-card__heading--light-taupe{background-color:#EBE7DB;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-green{background-color:#D1EFD4}.ontario-card__heading--light-green{background-color:#D1EFD4;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-lime{background-color:#DDEDC7}.ontario-card__heading--light-lime{background-color:#DDEDC7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-teal{background-color:#CFEDED}.ontario-card__heading--light-teal{background-color:#CFEDED;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-sky{background-color:#C5EEFA}.ontario-card__heading--light-sky{background-color:#C5EEFA;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-purple{background-color:#F1E3F2}.ontario-card__heading--light-purple{background-color:#F1E3F2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-orange{background-color:#FEE1D9}.ontario-card__heading--light-orange{background-color:#FEE1D9;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-red{background-color:#FFE0E2}.ontario-card__heading--light-red{background-color:#FFE0E2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-magenta{background-color:#FEDFF0}.ontario-card__heading--light-magenta{background-color:#FEDFF0;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--gold{background-color:#CBA52E}.ontario-card__heading--gold{background-color:#CBA52E;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--yellow{background-color:#FCAF17}.ontario-card__heading--yellow{background-color:#FCAF17;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--taupe{background-color:#C1B28F}.ontario-card__heading--taupe{background-color:#C1B28F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--green{background-color:#39B54A}.ontario-card__heading--green{background-color:#39B54A;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--lime{background-color:#8DC63F}.ontario-card__heading--lime{background-color:#8DC63F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--teal{background-color:#49A7A2}.ontario-card__heading--teal{background-color:#49A7A2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--sky{background-color:#00B2E3}.ontario-card__heading--sky{background-color:#00B2E3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--purple{background-color:#B975B7}.ontario-card__heading--purple{background-color:#B975B7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--orange{background-color:#F15A22}.ontario-card__heading--orange{background-color:#F15A22;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--red{background-color:#F0454B}.ontario-card__heading--red{background-color:#F0454B;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--magenta{background-color:#F03093}.ontario-card__heading--magenta{background-color:#F03093;padding-top:1rem;padding-bottom:1rem}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6666666667%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
+	'.ontario-card__heading{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}.ontario-card__heading{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){.ontario-card__heading{font-size:1.5rem;letter-spacing:0.0313rem;line-height:1.5}}.ontario-card{box-shadow:0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);border-radius:4px;margin-bottom:2.5rem;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer;background:#FFFFFF}.ontario-card:hover{box-shadow:0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35)}.ontario-card:focus-within{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.ontario-card:active{box-shadow:0 0 0 4px #009ADB;background-color:#f2f2f2}@media screen and (max-width: 40em){.ontario-card{margin-bottom:3rem;width:100% !important;max-width:100%}}.ontario-card--image-true{margin-top:-0.5rem}.ontario-card__card-type--horizontal .ontario-card--image-true{margin-top:0}.ontario-card__card-type--horizontal{display:flex}@media screen and (max-width: 40em){.ontario-card__card-type--horizontal{width:100%;max-width:100%}}.ontario-card__card-type--horizontal .ontario-card__image-container,.ontario-card__card-type--horizontal .ontario-card__text-container{position:relative}.ontario-card__card-type--horizontal .ontario-card__heading{border-radius:0}.ontario-card__card-type--horizontal a:focus-within{box-shadow:none;outline:none}.ontario-card__card-type--horizontal a:active{box-shadow:none}.ontario-card__card-type--horizontal img{height:100%;position:absolute}.ontario-card__image-right{flex-direction:row-reverse}.ontario-card__heading{margin:0;border-radius:4px 4px 0 0;padding:1.25rem 1.5rem 0.5rem 1.5rem;transition:text-decoration 0.3s ease-in-out;background-color:#FFFFFF;max-width:none}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card--image-true .ontario-card__heading{border-radius:0}.ontario-card__image-right .ontario-card--image-true .ontario-card__heading{border-radius:4px 0 0 0}.ontario-card__image-left .ontario-card--image-true .ontario-card__heading{border-radius:0 4px 0 0}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__heading a::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0}.ontario-card__heading a:focus{box-shadow:none}.ontario-card__heading a:active{outline:none}@media screen and (max-width: 73em){.ontario-card__heading{font-size:1.25rem;padding-left:1rem;padding-right:1rem}}.ontario-card__background--light-accent{background-color:#f2f2f2}.ontario-card__heading--light-accent{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--dark-accent{background-color:#1a1a1a}.ontario-card__heading--dark-accent{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-gold{background-color:#F0E7CC}.ontario-card__heading--light-gold{background-color:#F0E7CC;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-yellow{background-color:#F8E5C3}.ontario-card__heading--light-yellow{background-color:#F8E5C3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-taupe{background-color:#EBE7DB}.ontario-card__heading--light-taupe{background-color:#EBE7DB;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-green{background-color:#D1EFD4}.ontario-card__heading--light-green{background-color:#D1EFD4;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-lime{background-color:#DDEDC7}.ontario-card__heading--light-lime{background-color:#DDEDC7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-teal{background-color:#CFEDED}.ontario-card__heading--light-teal{background-color:#CFEDED;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-sky{background-color:#C5EEFA}.ontario-card__heading--light-sky{background-color:#C5EEFA;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-purple{background-color:#F1E3F2}.ontario-card__heading--light-purple{background-color:#F1E3F2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-orange{background-color:#FEE1D9}.ontario-card__heading--light-orange{background-color:#FEE1D9;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-red{background-color:#FFE0E2}.ontario-card__heading--light-red{background-color:#FFE0E2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--light-magenta{background-color:#FEDFF0}.ontario-card__heading--light-magenta{background-color:#FEDFF0;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--gold{background-color:#CBA52E}.ontario-card__heading--gold{background-color:#CBA52E;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--yellow{background-color:#FCAF17}.ontario-card__heading--yellow{background-color:#FCAF17;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--taupe{background-color:#C1B28F}.ontario-card__heading--taupe{background-color:#C1B28F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--green{background-color:#39B54A}.ontario-card__heading--green{background-color:#39B54A;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--lime{background-color:#8DC63F}.ontario-card__heading--lime{background-color:#8DC63F;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--teal{background-color:#49A7A2}.ontario-card__heading--teal{background-color:#49A7A2;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--sky{background-color:#00B2E3}.ontario-card__heading--sky{background-color:#00B2E3;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--purple{background-color:#B975B7}.ontario-card__heading--purple{background-color:#B975B7;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--orange{background-color:#F15A22}.ontario-card__heading--orange{background-color:#F15A22;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--red{background-color:#F0454B}.ontario-card__heading--red{background-color:#F0454B;padding-top:1rem;padding-bottom:1rem}.ontario-card__background--magenta{background-color:#F03093}.ontario-card__heading--magenta{background-color:#F03093;padding-top:1rem;padding-bottom:1rem}.ontario-card__card-type--horizontal .ontario-card__text-container{width:66.6666666667%}.ontario-card__image-size-one-fourth .ontario-card__text-container{width:75%}.ontario-card--no-image .ontario-card__text-container{width:100%}.ontario-card__description{margin:0;padding:0.5rem 1.5rem 1.5rem 1.5rem;background-color:#FFFFFF;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.ontario-card__description p{margin-top:0}.ontario-card__description p:last-of-type{margin-bottom:0}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}}.ontario-card--position-vertical .ontario-card__image-container{margin-bottom:-0.5rem}.ontario-card__card-type--horizontal .ontario-card__image-container{width:33.3%}.ontario-card__image-size-one-fourth .ontario-card__image-container{width:25%}.ontario-card__image{width:100%;height:100%;object-fit:cover;background-size:100% 100%}.ontario-card--position-vertical .ontario-card__image{border-top-left-radius:4px;border-top-right-radius:4px}.ontario-card__image-right .ontario-card__image{border-top-right-radius:4px;border-bottom-right-radius:4px}.ontario-card__image-left .ontario-card__image{border-top-left-radius:4px;border-bottom-left-radius:4px}';
 const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCard extends H {
+	class OntarioCard extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();

package/dist/components/ontario-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ontario-card.js","mappings":"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","names":["OntarioCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/utils/common/common.interface.ts","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["import { HeadingLevel } from '../../utils/common/common.interface';\n\nexport const layoutDirectionDefinitions = ['vertical', 'horizontal'] as const;\nexport const horizontalImagePositionDefinitions = ['left', 'right'] as const;\nexport const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'] as const;\n\nexport type LayoutDirection = (typeof layoutDirectionDefinitions)[number];\nexport type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];\nexport type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];\n\nexport const headerColourDefinitions = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n] as const;\n\nexport type HeaderColour = (typeof headerColourDefinitions)[number];\n\n// Define properties that you would like to track as component state\nexport type CardState = {\n\theaderColour: HeaderColour \| undefined;\n\theadingLevel: HeadingLevel \| undefined;\n\tlayoutDirection: LayoutDirection \| undefined;\n};\n","import { Language } from './language-types';\nimport { InputInteractionEvent, InputFocusBlurEvent } from '../events/event-handler.interface';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface Base {\n\t/*\n\t The unique identifier of the element. This is optional - if no ID is passed, one will be generated.\n\t /\n\telementId?: string;\n\n\t/\n\t Returns the unique identifier.\n\t /\n\tgetId?: () => string;\n\n\t/\n\t Stencil API that doesn't return anything. Implementation is optional.\n\t /\n\tcomponentWillLoad?: () => void;\n\n\t/\n\t Returns the HTML code to be rendered into a custom element.\n\t /\n\trender?: () => object;\n}\n\nexport interface Input extends Base {\n\t/\n\t The name assigned to the element. The name value is used to reference form data after a form is submitted.\n\t /\n\tname: string;\n\n\t/\n\t Used to define whether the input field is required or not.\n\t /\n\trequired?: boolean;\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 no language is passed, it will default to English.\n\t /\n\tlanguage?: Language;\n\n\t/\n\t The element content value.\n\t /\n\tvalue?: string;\n\n\t/\n\t Used to add a custom function to the input onChange event.\n\t /\n\tcustomOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onBlur event.\n\t /\n\tcustomOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onFocus event.\n\t /\n\tcustomOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\tinputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\tinputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\tinputOnFocus: EventEmitter<InputFocusBlurEvent>;\n}\n\nexport interface Hint extends Base {\n\t/\n\t The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t /\n\thintContentType?: 'string' \| 'html';\n\n\t/\n\t Text to display as the hint text statement.\n\t \n\t Setting the hint can be done using the element content or setting the\n\t * this property. This property will take precedence.\n\t /\n\thint: string;\n}\n\nexport type HintContentType = 'string' \| 'html';\n\nexport const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\n/\n Create a type from an array of values.\n \n https://steveholgado.com/typescript-types-from-arrays/\n /\nexport type HeadingLevel = (typeof headingLevelDefinitions)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin-bottom: spacing.$spacing-7;\n\tpadding: spacing.$spacing-0;\n\t/\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t /\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\tbackground: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: math.percentage(math.div(2, 3));\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\theaderColourDefinitions,\n\tHeaderColour,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tlayoutDirectionDefinitions,\n\tLayoutDirection,\n\tCardState,\n} from './ontario-card-types';\nimport { headingLevelDefinitions, HeadingLevel } from '../../utils/common/common.interface';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t Text to be displayed within the header.\n\t \n\t @example\n\t \t<ontario-card\n\t \t\theader-type=\"dark\"\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t /\n\t@Prop() label: string;\n\n\t/\n\t The heading level that the label will be rendered as.\n\t \n\t @example\n\t \t<ontario-card\n\t \t\theading-level=\"h4\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t>\n\t /\n\t@Prop() headingLevel: HeadingLevel = 'h2';\n\n\t/\n\t Image to be displayed within the card image container.\n\t \n\t This is optional.\n\t /\n\t@Prop() image?: string;\n\n\t/\n\t Alt text for the card's image.\n\t \n\t This is optional prop, but may be required for an\n\t * image due to accessibility requirements.\n\t \n\t You can find guidance on when to add alt text to an image\n\t * on the Ontario.ca web content editing guide.\n\t \n\t https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility\n\t \n\t Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup\n\t * for decorative images. If left as undefined, the alt attribute will not render in markup.\n\t /\n\t@Prop() imageAltText?: string = '';\n\n\t/\n\t Text to be displayed within the card description container.\n\t \n\t This is optional.\n\t /\n\t@Prop() description?: string;\n\n\t/\n\t Action link for when the card is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop() cardLink?: string;\n\n\t/\n\t The layout direction/orientation of the card.\n\t \n\t If no type is passed, it will default to 'vertical'.\n\t \n\t /\n\t@Prop() layoutDirection?: LayoutDirection = 'vertical';\n\n\t/*\n\t Set the card's header colour.\n\t \n\t This is optional.\n\t /\n\t@Prop() headerColour?: HeaderColour;\n\n\t/\n\t The position of the image when the card-type is set to 'horizontal'.\n\t \n\t This prop is only necessry when the card-type is set to 'horizontal'.\n\t \n\t @example\n\t * \t<ontario-card\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\timage=\"https://picsum.photos/200/300\"\n\t \t\thorizontal-image-position-type=\"left\"\n\t \t\thorizontal-image-size-type=\"one-fourth\"\n\t \t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t \t</ontario-card>\n\t /\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/\n\t The size of the image when the card-type is set to 'horizontal'.\n\t \n\t This prop is only necessry when the card-type is set to 'horizontal'.\n\t \n\t @example\n\t * \t<ontario-card\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\timage=\"https://picsum.photos/200/300\"\n\t \t\thorizontal-image-position-type=\"left\"\n\t \t\thorizontal-image-size-type=\"one-fourth\"\n\t \t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t \t</ontario-card>\n\t /\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/\n\t Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t \n\t This is optional.\n\t \n\t /\n\t@Prop() ariaLabelText?: string;\n\n\t@State() private cardState: CardState = {\n\t\theaderColour: undefined,\n\t\theadingLevel: undefined,\n\t\tlayoutDirection: undefined,\n\t};\n\n\t/*\n\t Watch for changes to the `layoutDirection` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.\n\t /\n\t@Watch('layoutDirection')\n\tvalidateLayoutDirection() {\n\t\tconst isValid = this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning(\n\t\t\t\t'layout-direction',\n\t\t\t\t'<ontario-card>',\n\t\t\t\tthis.layoutDirection,\n\t\t\t\tlayoutDirectionDefinitions,\n\t\t\t\t'vertical',\n\t\t\t);\n\t\t\tthis.updateCardState('layoutDirection', 'vertical');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('layoutDirection', this.layoutDirection);\n\t}\n\n\t/\n\t Watch for changes to the `headingLevel` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).\n\t \n\t If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel() {\n\t\tconst isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');\n\t\t\tthis.updateCardState('headingLevel', 'h2');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headingLevel', this.headingLevel);\n\t}\n\n\t/\n\t Watch for changes to the `headerColour` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t /\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tconst isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);\n\n\t\tif (!isValid && this.headerColour !== undefined) {\n\t\t\tthis.printPropWarning('header-colour', '<ontario-card>', this.headerColour, headerColourDefinitions, 'undefined');\n\t\t\tthis.updateCardState('headerColour', undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headerColour', this.headerColour);\n\t}\n\n\t/\n\t Print an invalid prop warning message.\n\t \n\t @param {string} propName - Name of the prop\n\t * @param {string} component - Component the error is on e.g. <ontario-card>\n\t * @param {any} propValue - Value of the prop\n\t * @param {readonly any[]} acceptableValues - readonly array of acceptable prop values\n\t * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to\n\t /\n\tprivate printPropWarning(\n\t\tpropName: string,\n\t\tcomponent: string,\n\t\tpropValue: any,\n\t\tacceptableValues: readonly any[],\n\t\tdefaultValue: string,\n\t) {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` ${propName} `)\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(` ${component} `)\n\t\t\t.addRegularText('was set to an invalid value of ')\n\t\t\t.addMonospaceText(` ${propValue} `)\n\t\t\t.addRegularText('. Only ')\n\t\t\t.addMonospaceText(printArray([...acceptableValues]))\n\t\t\t.addRegularText(' are supported values. The default value of')\n\t\t\t.addMonospaceText(` ${defaultValue} `)\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/\n\t Update a key within the State Object with a value.\n\t \n\t Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.\n\t * If only the corresponding object key/value is updated, corresponding render changes may not happen.\n\t \n\t @param {keyof CardState} key - Should match a key found within `CardState`.\n\t * @param {any} value - Should match the value type associated to the key within `CardState`.\n\t /\n\tprivate updateCardState(key: keyof CardState, value: any) {\n\t\tconst cardStateCopy = { ...this.cardState };\n\t\tcardStateCopy[key] = value;\n\t\tthis.cardState = cardStateCopy;\n\t}\n\n\t/\n\t Returns the top level classes of the card.\n\t \n\t @returns {string}\n\t /\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.cardState.layoutDirection === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/\n\t Returns the heading classes of the card.\n\t \n\t @returns {string}\n\t /\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass = this.cardState.headerColour ? `ontario-card__heading--${this.cardState.headerColour}` : '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/\n\t Returns the url that the card links to.\n\t \n\t @returns {string}\n\t /\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t /\n\tcomponentWillLoad() {\n\t\tthis.validateLayoutDirection();\n\t\tthis.validateHeadingLevel();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" alt={this.imageAltText} src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t{/\n\t\t\t\t\t h() is a stencil wrapped shorthand method for a render function, and is very\n\t\t\t\t\t * similar to the h() method or createElement() method found within React\n\t\t\t\t\t * It accepts 3 parameters:\n\t\t\t\t\t * - a string interpretation of an HTML tag (e.g. 'h2')\n\t\t\t\t\t * - an object of properties / attributes (e.g. 'id', 'className')\n\t\t\t\t\t * - The innerHTML such as a string, or additional HTML elements\n\t\t\t\t\t */}\n\t\t\t\t\t{h(\n\t\t\t\t\t\tthis.cardState.headingLevel, //tag\n\t\t\t\t\t\t{ className: this.getCardHeadingClasses() }, //attributes\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>,\n\t\t\t\t\t)}\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}
1	+ {"file":"ontario-card.js","mappings":"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","names":["OntarioCard","__stencil_proxyCustomElement"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/utils/common/common.interface.ts","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["import { HeadingLevel } from '../../utils/common/common.interface';\n\nexport const layoutDirectionDefinitions = ['vertical', 'horizontal'] as const;\nexport const horizontalImagePositionDefinitions = ['left', 'right'] as const;\nexport const horizontalImageSizeDefinitions = ['one-fourth', 'one-third'] as const;\n\nexport type LayoutDirection = (typeof layoutDirectionDefinitions)[number];\nexport type HorizontalImagePositionType = (typeof horizontalImagePositionDefinitions)[number];\nexport type HorizontalImageSizeType = (typeof horizontalImageSizeDefinitions)[number];\n\nexport const headerColourDefinitions = [\n\t'dark-accent',\n\t'light-accent',\n\t'light-gold',\n\t'light-yellow',\n\t'light-taupe',\n\t'light-green',\n\t'light-lime',\n\t'light-teal',\n\t'light-sky',\n\t'light-blue',\n\t'light-purple',\n\t'light-orange',\n\t'light-red',\n\t'light-magenta',\n\t'gold',\n\t'yellow',\n\t'taupe',\n\t'green',\n\t'lime',\n\t'teal',\n\t'sky',\n\t'blue',\n\t'purple',\n\t'orange',\n\t'red',\n\t'magenta',\n] as const;\n\nexport type HeaderColour = (typeof headerColourDefinitions)[number];\n\n// Define properties that you would like to track as component state\nexport type CardState = {\n\theaderColour: HeaderColour \| undefined;\n\theadingLevel: HeadingLevel \| undefined;\n\tlayoutDirection: LayoutDirection \| undefined;\n};\n","import { Language } from './language-types';\nimport { InputInteractionEvent, InputFocusBlurEvent } from '../events/event-handler.interface';\nimport { EventEmitter } from '@stencil/core';\n\nexport interface Base {\n\t/*\n\t The unique identifier of the element. This is optional - if no ID is passed, one will be generated.\n\t /\n\telementId?: string;\n\n\t/\n\t Returns the unique identifier.\n\t /\n\tgetId?: () => string;\n\n\t/\n\t Stencil API that doesn't return anything. Implementation is optional.\n\t /\n\tcomponentWillLoad?: () => void;\n\n\t/\n\t Returns the HTML code to be rendered into a custom element.\n\t /\n\trender?: () => object;\n}\n\nexport interface Input extends Base {\n\t/\n\t The name assigned to the element. The name value is used to reference form data after a form is submitted.\n\t /\n\tname: string;\n\n\t/\n\t Used to define whether the input field is required or not.\n\t /\n\trequired?: boolean;\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 no language is passed, it will default to English.\n\t /\n\tlanguage?: Language;\n\n\t/\n\t The element content value.\n\t /\n\tvalue?: string;\n\n\t/\n\t Used to add a custom function to the input onChange event.\n\t /\n\tcustomOnChange?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onBlur event.\n\t /\n\tcustomOnBlur?: (event: globalThis.Event) => void;\n\n\t/\n\t Used to add a custom function to the input onFocus event.\n\t /\n\tcustomOnFocus?: (event: globalThis.Event) => void;\n\n\t/\n\t Emitted when a keyboard input or mouse event occurs when an input has been changed.\n\t /\n\tinputOnChange: EventEmitter<InputInteractionEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has lost focus.\n\t /\n\tinputOnBlur: EventEmitter<InputFocusBlurEvent>;\n\n\t/\n\t Emitted when a keyboard input event occurs when an input has gained focus.\n\t /\n\tinputOnFocus: EventEmitter<InputFocusBlurEvent>;\n}\n\nexport interface Hint extends Base {\n\t/\n\t The content type of the hint.\n\t * If no prop is passed, it will default to a string.\n\t * If the hint requires multiple lines or HTML, the `hintContentType` prop should be set to `html`.\n\t /\n\thintContentType?: 'string' \| 'html';\n\n\t/\n\t Text to display as the hint text statement.\n\t \n\t Setting the hint can be done using the element content or setting the\n\t * this property. This property will take precedence.\n\t /\n\thint: string;\n}\n\nexport type HintContentType = 'string' \| 'html';\n\nexport const headingLevelDefinitions = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;\n\n/\n Create a type from an array of values.\n \n https://steveholgado.com/typescript-types-from-arrays/\n /\nexport type HeadingLevel = (typeof headingLevelDefinitions)[number];\n","@use 'sass:math';\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/placeholder/focus.placeholders' as\n\tplaceholders;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-sizes.variables' as fontSizes;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;\n@use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;\n\n.ontario-card {\n\tbox-shadow: 0rem 0.1875rem 0.5rem 0.0625rem rgba(0, 0, 0, 0.4);\n\tborder-radius: globalVariables.$global-radius;\n\tmargin-bottom: spacing.$spacing-7;\n\tpadding: spacing.$spacing-0;\n\t/\n\t * Required for cards to stay the same height regardless of content size.\n\t * Without subtracting the margin-bottom amount the cards will be too large.\n\t /\n\theight: calc(100% - spacing.$spacing-7);\n\tlist-style-type: none;\n\ttransition: all 0.3s ease-in-out;\n\tposition: relative;\n\tcursor: pointer;\n\tbackground: colours.$ontario-colour-white;\n\n\t&:hover {\n\t\tbox-shadow: 0rem 0.375rem 0.75rem 0.125rem rgba(0, 0, 0, 0.35);\n\t}\n\n\t&:focus-within {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\toutline: 4px solid transparent;\n\t\ttransition: box-shadow 0.1s ease-in-out;\n\t}\n\n\t&:active {\n\t\tbox-shadow: placeholders.$ontario-focus-box-shadow;\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\tmargin-bottom: spacing.$spacing-8;\n\t\twidth: 100% !important; // to override the specificity of the widths listed for the card-rows\n\t\tmax-width: 100%;\n\t}\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 -1;\n\t@at-root .ontario-card__card-type--horizontal & {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n}\n\n.ontario-card__card-type--horizontal {\n\tdisplay: flex;\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: 100%;\n\t\tmax-width: 100%;\n\t}\n\n\t.ontario-card__image-container,\n\t.ontario-card__text-container {\n\t\tposition: relative;\n\t}\n\n\t.ontario-card__heading {\n\t\tborder-radius: 0;\n\t}\n\n\ta {\n\t\t&:focus-within {\n\t\t\tbox-shadow: none;\n\t\t\toutline: none;\n\t\t}\n\n\t\t&:active {\n\t\t\tbox-shadow: none;\n\t\t}\n\t}\n\n\timg {\n\t\theight: 100%;\n\t\tposition: absolute;\n\t}\n}\n\n.ontario-card__image-right {\n\tflex-direction: row-reverse;\n}\n\n.ontario-card__heading {\n\t@extend %h4-styles;\n\tmargin: spacing.$spacing-0;\n\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\tpadding: (spacing.$spacing-5 - spacing.$spacing-1) spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5;\n\ttransition: text-decoration 0.3s ease-in-out;\n\tbackground-color: colours.$ontario-colour-white;\n\tmax-width: none;\n\n\t.ontario-card:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-black;\n\t}\n\n\t.ontario-card--image-true & {\n\t\tborder-radius: 0;\n\t\t@at-root .ontario-card__image-right & {\n\t\t\tborder-radius: globalVariables.$global-radius 0 0 0;\n\t\t}\n\n\t\t@at-root .ontario-card__image-left & {\n\t\t\tborder-radius: 0 globalVariables.$global-radius 0 0;\n\t\t}\n\t}\n\n\ta {\n\t\tcolor: colours.$ontario-colour-black;\n\t\ttext-decoration: none;\n\t\toutline: none;\n\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tleft: 0;\n\t\t\ttop: 0;\n\t\t\tright: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: none;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tfont-size: fontSizes.$ontario-font-size-large;\n\t\tpadding-left: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-4;\n\t}\n}\n\n// ontario-card's header colour options\n\n$ontario-card-heading-colours: (\n\t'light-accent': colours.$ontario-greyscale-5,\n\t'dark-accent': colours.$ontario-colour-black,\n\t'light-gold': colours.$ontario-colour-light-gold,\n\t'light-yellow': colours.$ontario-colour-light-yellow,\n\t'light-taupe': colours.$ontario-colour-light-taupe,\n\t'light-green': colours.$ontario-colour-light-green,\n\t'light-lime': colours.$ontario-colour-light-lime,\n\t'light-teal': colours.$ontario-colour-light-teal,\n\t'light-sky': colours.$ontario-colour-light-sky,\n\t'light-purple': colours.$ontario-colour-light-purple,\n\t'light-orange': colours.$ontario-colour-light-orange,\n\t'light-red': colours.$ontario-colour-light-red,\n\t'light-magenta': colours.$ontario-colour-light-magenta,\n\t'gold': colours.$ontario-colour-gold,\n\t'yellow': colours.$ontario-colour-yellow,\n\t'taupe': colours.$ontario-colour-taupe,\n\t'green': colours.$ontario-colour-green,\n\t'lime': colours.$ontario-colour-lime,\n\t'teal': colours.$ontario-colour-teal,\n\t'sky': colours.$ontario-colour-sky,\n\t'purple': colours.$ontario-colour-purple,\n\t'orange': colours.$ontario-colour-orange,\n\t'red': colours.$ontario-colour-red,\n\t'magenta': colours.$ontario-colour-magenta,\n);\n\n@each $colour-name, $colour-value in $ontario-card-heading-colours {\n\t.ontario-card__background--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t}\n\n\t.ontario-card__heading--#{$colour-name} {\n\t\tbackground-color: $colour-value;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: math.percentage(math.div(2, 3));\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 75%;\n\t}\n\n\t.ontario-card--no-image & {\n\t\twidth: 100%;\n\t}\n}\n\n.ontario-card__description {\n\tmargin: spacing.$spacing-0;\n\tpadding: spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-5 spacing.$spacing-5;\n\tbackground-color: colours.$ontario-colour-white;\n\tborder-bottom-left-radius: globalVariables.$global-radius;\n\tborder-bottom-right-radius: globalVariables.$global-radius;\n\n\tp {\n\t\tmargin-top: spacing.$spacing-0;\n\t}\n\n\tp:last-of-type {\n\t\tmargin-bottom: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\tpadding: spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4;\n\t}\n}\n\n.ontario-card__image-container {\n\t.ontario-card--position-vertical & {\n\t\tmargin-bottom: spacing.$spacing-2 * -1;\n\t}\n\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 33.3%;\n\t}\n\n\t.ontario-card__image-size-one-fourth & {\n\t\twidth: 25%;\n\t}\n}\n\n.ontario-card__image {\n\twidth: 100%;\n\theight: 100%;\n\tobject-fit: cover;\n\tbackground-size: 100% 100%;\n\n\t.ontario-card--position-vertical & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-right & {\n\t\tborder-top-right-radius: globalVariables.$global-radius;\n\t\tborder-bottom-right-radius: globalVariables.$global-radius;\n\t}\n\n\t.ontario-card__image-left & {\n\t\tborder-top-left-radius: globalVariables.$global-radius;\n\t\tborder-bottom-left-radius: globalVariables.$global-radius;\n\t}\n}\n","import { Component, Prop, Element, h, State, Watch } from '@stencil/core';\nimport {\n\theaderColourDefinitions,\n\tHeaderColour,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tlayoutDirectionDefinitions,\n\tLayoutDirection,\n\tCardState,\n} from './ontario-card-types';\nimport { headingLevelDefinitions, HeadingLevel } from '../../utils/common/common.interface';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\n\n@Component({\n\ttag: 'ontario-card',\n\tstyleUrl: 'ontario-card.scss',\n\tshadow: true,\n})\nexport class OntarioCard {\n\t@Element() host: HTMLElement;\n\n\t/*\n\t Text to be displayed within the header.\n\t \n\t @example\n\t \t<ontario-card\n\t \t\theader-type=\"dark\"\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\tdescription=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t /\n\t@Prop() label: string;\n\n\t/\n\t The heading level that the label will be rendered as.\n\t \n\t @example\n\t \t<ontario-card\n\t \t\theading-level=\"h4\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t>\n\t /\n\t@Prop() headingLevel: HeadingLevel = 'h2';\n\n\t/\n\t Image to be displayed within the card image container.\n\t \n\t This is optional.\n\t /\n\t@Prop() image?: string;\n\n\t/\n\t Alt text for the card's image.\n\t \n\t This is optional prop, but may be required for an\n\t * image due to accessibility requirements.\n\t \n\t You can find guidance on when to add alt text to an image\n\t * on the Ontario.ca web content editing guide.\n\t \n\t https://www.ontario.ca/page/ontario-ca-web-content-editing-guide#alt-text-image-accessibility\n\t \n\t Note: This should default to an empty string ('') to ensure the alt attribute appears in the markup\n\t * for decorative images. If left as undefined, the alt attribute will not render in markup.\n\t /\n\t@Prop() imageAltText?: string = '';\n\n\t/\n\t Text to be displayed within the card description container.\n\t \n\t This is optional.\n\t /\n\t@Prop() description?: string;\n\n\t/\n\t Action link for when the card is clicked.\n\t \n\t This is optional.\n\t /\n\t@Prop() cardLink?: string;\n\n\t/\n\t The layout direction/orientation of the card.\n\t \n\t If no type is passed, it will default to 'vertical'.\n\t \n\t /\n\t@Prop() layoutDirection?: LayoutDirection = 'vertical';\n\n\t/*\n\t Set the card's header colour.\n\t \n\t This is optional.\n\t /\n\t@Prop() headerColour?: HeaderColour;\n\n\t/\n\t The position of the image when the card-type is set to 'horizontal'.\n\t \n\t This prop is only necessry when the card-type is set to 'horizontal'.\n\t \n\t @example\n\t * \t<ontario-card\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\timage=\"https://picsum.photos/200/300\"\n\t \t\thorizontal-image-position-type=\"left\"\n\t \t\thorizontal-image-size-type=\"one-fourth\"\n\t \t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t \t</ontario-card>\n\t /\n\t@Prop() horizontalImagePositionType?: HorizontalImagePositionType = 'left';\n\n\t/\n\t The size of the image when the card-type is set to 'horizontal'.\n\t \n\t This prop is only necessry when the card-type is set to 'horizontal'.\n\t \n\t @example\n\t * \t<ontario-card\n\t \t\tcard-type=\"horizontal\"\n\t \t\tlabel=\"Card Title 1\"\n\t \t\timage=\"https://picsum.photos/200/300\"\n\t \t\thorizontal-image-position-type=\"left\"\n\t \t\thorizontal-image-size-type=\"one-fourth\"\n\t \t description=\"Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum\"\n\t \t>\n\t \t</ontario-card>\n\t /\n\t@Prop() horizontalImageSizeType?: HorizontalImageSizeType = 'one-third';\n\n\t/\n\t Provides more context as to what the card interaction is doing. This should only be used for accessibility purposes, if the card interaction requires more * * description than what the text provides.\n\t \n\t This is optional.\n\t \n\t /\n\t@Prop() ariaLabelText?: string;\n\n\t@State() private cardState: CardState = {\n\t\theaderColour: undefined,\n\t\theadingLevel: undefined,\n\t\tlayoutDirection: undefined,\n\t};\n\n\t/*\n\t Watch for changes to the `layoutDirection` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `layoutDirection` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `cardState.layoutDirection` will be set to the matching array key value.\n\t /\n\t@Watch('layoutDirection')\n\tvalidateLayoutDirection() {\n\t\tconst isValid = this.layoutDirection && validateValueAgainstArray(this.layoutDirection, layoutDirectionDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning(\n\t\t\t\t'layout-direction',\n\t\t\t\t'<ontario-card>',\n\t\t\t\tthis.layoutDirection,\n\t\t\t\tlayoutDirectionDefinitions,\n\t\t\t\t'vertical',\n\t\t\t);\n\t\t\tthis.updateCardState('layoutDirection', 'vertical');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('layoutDirection', this.layoutDirection);\n\t}\n\n\t/\n\t Watch for changes to the `headingLevel` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headingLevel` will be set to its default (`h2`).\n\t \n\t If a match is found in one of the array values then `headingLevel` will be set to the matching array key value.\n\t /\n\t@Watch('headingLevel')\n\tvalidateHeadingLevel() {\n\t\tconst isValid = this.headingLevel && validateValueAgainstArray(this.headingLevel, headingLevelDefinitions);\n\n\t\tif (!isValid) {\n\t\t\tthis.printPropWarning('heading-level', '<ontario-card>', this.headingLevel, headingLevelDefinitions, 'h2');\n\t\t\tthis.updateCardState('headingLevel', 'h2');\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headingLevel', this.headingLevel);\n\t}\n\n\t/\n\t Watch for changes to the `headerColour` property for validation purposes.\n\t \n\t If the user input doesn't match one of the array values then `headerColour` will be kept empty (undefined).\n\t * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.\n\t /\n\t@Watch('headerColour')\n\tvalidateHeaderColour() {\n\t\tconst isValid = this.headerColour && validateValueAgainstArray(this.headerColour, headerColourDefinitions);\n\n\t\tif (!isValid && this.headerColour !== undefined) {\n\t\t\tthis.printPropWarning('header-colour', '<ontario-card>', this.headerColour, headerColourDefinitions, 'undefined');\n\t\t\tthis.updateCardState('headerColour', undefined);\n\t\t\treturn;\n\t\t}\n\n\t\tthis.updateCardState('headerColour', this.headerColour);\n\t}\n\n\t/\n\t Print an invalid prop warning message.\n\t \n\t @param {string} propName - Name of the prop\n\t * @param {string} component - Component the error is on e.g. <ontario-card>\n\t * @param {any} propValue - Value of the prop\n\t * @param {readonly any[]} acceptableValues - readonly array of acceptable prop values\n\t * @param {string} defaultValue - Stringified representation of the value that the corresponding State Object value will default to\n\t /\n\tprivate printPropWarning(\n\t\tpropName: string,\n\t\tcomponent: string,\n\t\tpropValue: any,\n\t\tacceptableValues: readonly any[],\n\t\tdefaultValue: string,\n\t) {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(` ${propName} `)\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(` ${component} `)\n\t\t\t.addRegularText('was set to an invalid value of ')\n\t\t\t.addMonospaceText(` ${propValue} `)\n\t\t\t.addRegularText('. Only ')\n\t\t\t.addMonospaceText(printArray([...acceptableValues]))\n\t\t\t.addRegularText(' are supported values. The default value of')\n\t\t\t.addMonospaceText(` ${defaultValue} `)\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/\n\t Update a key within the State Object with a value.\n\t \n\t Note: When state is represented as an object, and values are changed, the entire object needs to be rebuilt.\n\t * If only the corresponding object key/value is updated, corresponding render changes may not happen.\n\t \n\t @param {keyof CardState} key - Should match a key found within `CardState`.\n\t * @param {any} value - Should match the value type associated to the key within `CardState`.\n\t /\n\tprivate updateCardState(key: keyof CardState, value: any) {\n\t\tconst cardStateCopy = { ...this.cardState };\n\t\tcardStateCopy[key] = value;\n\t\tthis.cardState = cardStateCopy;\n\t}\n\n\t/\n\t Returns the top level classes of the card.\n\t \n\t @returns {string}\n\t /\n\tprivate getCardClasses(): string {\n\t\tconst baseClass =\n\t\t\tthis.cardState.layoutDirection === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.cardState.layoutDirection} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.cardState.layoutDirection}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\tconst backgroundClass =\n\t\t\tthis.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';\n\n\t\treturn `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();\n\t}\n\n\t/\n\t Returns the heading classes of the card.\n\t \n\t @returns {string}\n\t /\n\tprivate getCardHeadingClasses(): string {\n\t\tconst baseClass = 'ontario-card__heading';\n\n\t\tconst backgroundClass = this.cardState.headerColour ? `ontario-card__heading--${this.cardState.headerColour}` : '';\n\n\t\treturn `${baseClass} ${backgroundClass}`.trim();\n\t}\n\n\t/\n\t Returns the url that the card links to.\n\t \n\t @returns {string}\n\t /\n\tprivate getHref(): string {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\t/\n\t Component life cycle hook.\n\t \n\t https://stenciljs.com/docs/component-lifecycle#connectedcallback\n\t /\n\tcomponentWillLoad() {\n\t\tthis.validateLayoutDirection();\n\t\tthis.validateHeadingLevel();\n\t\tthis.validateHeaderColour();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getCardClasses()}>\n\t\t\t\t{this.image && (\n\t\t\t\t\t<div class=\"ontario-card__image-container\">\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t<img class=\"ontario-card__image\" alt={this.imageAltText} src={this.image} />\n\t\t\t\t\t\t</a>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div class={`ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`}>\n\t\t\t\t\t{/\n\t\t\t\t\t h() is a stencil wrapped shorthand method for a render function, and is very\n\t\t\t\t\t * similar to the h() method or createElement() method found within React\n\t\t\t\t\t * It accepts 3 parameters:\n\t\t\t\t\t * - a string interpretation of an HTML tag (e.g. 'h2')\n\t\t\t\t\t * - an object of properties / attributes (e.g. 'id', 'className')\n\t\t\t\t\t * - The innerHTML such as a string, or additional HTML elements\n\t\t\t\t\t */}\n\t\t\t\t\t{h(\n\t\t\t\t\t\tthis.cardState.headingLevel, //tag\n\t\t\t\t\t\t{ className: this.getCardHeadingClasses() }, //attributes\n\t\t\t\t\t\t<a href={this.getHref()} aria-label={this.ariaLabelText}>\n\t\t\t\t\t\t\t{this.label}\n\t\t\t\t\t\t</a>,\n\t\t\t\t\t)}\n\t\t\t\t\t{this.description && (\n\t\t\t\t\t\t<div class=\"ontario-card__description\">\n\t\t\t\t\t\t\t<p>{this.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</li>\n\t\t);\n\t}\n}\n"],"version":3}

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

@@ -1,30 +1,30 @@
-import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-import { I as Input } from './p-BgeHsfjA.js';
-import { I as InputCaption, h as handleInputEvent, E as EventType } from './p-CJ1sSyqT.js';
-import { b as validateLanguage, c as validateObjectExists, a as validatePropExists } from './p-CNqFEifG.js';
-import { C as ConsoleMessageClass } from './p-CJXRCL8b.js';
-import { c as constructHintTextObject } from './p-CkusvkRr.js';
-import { t as translations } from './p-DgMhpSmi.js';
-import { E as ErrorMessage } from './p-DcoC7PVV.js';
-import { d as defineCustomElement$6 } from './p-orSa-v1r.js';
-import { d as defineCustomElement$5 } from './p-Br8HOVJk.js';
-import { d as defineCustomElement$4 } from './p-BeNeXjVo.js';
-import { d as defineCustomElement$3 } from './p-DyZbYpqr.js';
-import { d as defineCustomElement$2 } from './p-pYZtHvSO.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { I as Input } from './input.js';
+import { I as InputCaption, h as handleInputEvent, E as EventType } from './event-handler.js';
+import { b as validateLanguage, c as validateObjectExists, a as validatePropExists } from './validation-functions.js';
+import { C as ConsoleMessageClass } from './console-message.js';
+import { c as constructHintTextObject } from './hints.js';
+import { t as translations } from './global.i18n.js';
+import { E as ErrorMessage } from './error-message.js';
+import { d as defineCustomElement$6 } from './ontario-hint-expander2.js';
+import { d as defineCustomElement$5 } from './ontario-hint-text2.js';
+import { d as defineCustomElement$4 } from './ontario-icon-alert-error2.js';
+import { d as defineCustomElement$3 } from './ontario-icon-chevron-down2.js';
+import { d as defineCustomElement$2 } from './ontario-icon-chevron-up2.js';
 const ontarioCheckboxesCss =
-	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.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}.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){.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-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-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.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-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}:host{--checkbox-bg:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z\' fill=\'%231a1a1a\'/%3E%3Cpath d=\'M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z\' fill=\'%23fff\'/%3E%3C/svg%3E")}.ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:1.75rem;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:2rem}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-0.125rem;left:-0.125rem;opacity:0;width:36px;height:36px;z-index:0;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:0.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:0.33rem 0}}.ontario-checkboxes__label:before{content:"";border:0.125rem solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:2rem;height:2rem;transition:border 0.1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:1.75rem;height:1.75rem}}.ontario-checkboxes__label:after{content:"";background-image:var(--checkbox-bg);background-repeat:no-repeat;height:1.875rem;width:1.875rem;position:absolute;top:0.0625rem;left:0.0625rem;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:2.125rem;width:2.125rem}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{-moz-box-shadow:0 0 0 0.25rem #009ADB;-webkit-box-shadow:0 0 0 0.25rem #009ADB;box-shadow:0 0 0 0.25rem #009ADB;outline:0.25rem solid transparent;transition:all 0.1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}.ontario-checkboxes__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-checkboxes__hint-expander{margin-top:1rem}}';
+	'@charset "UTF-8";h6,.ontario-h6,h5,.ontario-h5,h4,.ontario-h4,h3,.ontario-h3,h2,.ontario-h2,.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}.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){.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-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-input:focus,.ontario-input:active{box-shadow:0 0 0 4px #009ADB;outline:4px solid transparent;transition:box-shadow 0.1s ease-in-out}.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-error-messaging{display:flex;align-items:flex-start;margin:-0.25rem 0 0.5rem 0;color:#D81A21;max-width:48rem}.ontario-error-messaging__content{margin-left:0.5rem}.ontario-input__error{border-color:#D81A21 !important}.ontario-error__hidden{display:none}:host{--checkbox-bg:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'%3E%3Cpath d=\'M0 2.667C0 1.194 1.194 0 2.667 0h18.667C22.806 0 24 1.194 24 2.667v18.667C24 22.806 22.806 24 21.333 24H2.667C1.194 24 0 22.806 0 21.333V2.667z\' fill=\'%231a1a1a\'/%3E%3Cpath d=\'M2.667 12.616l6.667 6.718 12-12.092-1.88-1.908L9.333 15.53l-4.787-4.8-1.88 1.894z\' fill=\'%23fff\'/%3E%3C/svg%3E")}.ontario-checkboxes{margin-bottom:2.5rem;max-width:48rem}.ontario-checkboxes__item{position:relative;margin:0 0 1rem;padding:0 0 0 2rem;min-height:1.75rem;box-sizing:content-box}.ontario-checkboxes__item:last-of-type{margin:0}@media screen and (max-width: 40em){.ontario-checkboxes__item{padding:0 0 0 2.5rem;min-height:2rem}}.ontario-checkboxes__input{cursor:pointer;margin:0;position:absolute;top:-0.125rem;left:-0.125rem;opacity:0;width:36px;height:36px;z-index:0;-webkit-tap-highlight-color:transparent}@media screen and (max-width: 40em){.ontario-checkboxes__input{width:40px;height:40px}}.ontario-checkboxes__label{display:inline-block;cursor:pointer;line-height:1.5;margin:0.25rem 0;padding:0 1rem;width:auto;white-space:normal}@media screen and (max-width: 40em){.ontario-checkboxes__label{margin:0.33rem 0}}.ontario-checkboxes__label:before{content:"";border:0.125rem solid #1a1a1a;border-radius:4px;position:absolute;top:0;left:0;width:2rem;height:2rem;transition:border 0.1s ease-in-out;display:block}@media screen and (min-width: 40em){.ontario-checkboxes__label:before{width:1.75rem;height:1.75rem}}.ontario-checkboxes__label:after{content:"";background-image:var(--checkbox-bg);background-repeat:no-repeat;height:1.875rem;width:1.875rem;position:absolute;top:0.0625rem;left:0.0625rem;right:0;bottom:0;opacity:0;display:block}@media screen and (max-width: 40em){.ontario-checkboxes__label:after{height:2.125rem;width:2.125rem}}.ontario-checkboxes__input:focus+.ontario-checkboxes__label:before{-moz-box-shadow:0 0 0 0.25rem #009ADB;-webkit-box-shadow:0 0 0 0.25rem #009ADB;box-shadow:0 0 0 0.25rem #009ADB;outline:0.25rem solid transparent;transition:all 0.1s ease-in-out}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:after{opacity:1}.ontario-checkboxes__input:checked+.ontario-checkboxes__label:before{background-color:#1a1a1a}.ontario-checkboxes__hint-expander{margin:0.75rem 0 0 0.5rem}@media screen and (max-width: 40em){.ontario-checkboxes__hint-expander{margin-top:1rem}}';
 const OntarioCheckboxes$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCheckboxes extends H {
+	class OntarioCheckboxes extends HTMLElement {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.checkboxOnChange = createEvent(this, 'checkboxOnChange');
-			this.checkboxOnBlur = createEvent(this, 'checkboxOnBlur');
-			this.checkboxOnFocus = createEvent(this, 'checkboxOnFocus');
-			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred');
+			this.checkboxOnChange = createEvent(this, 'checkboxOnChange', 7);
+			this.checkboxOnBlur = createEvent(this, 'checkboxOnBlur', 7);
+			this.checkboxOnFocus = createEvent(this, 'checkboxOnFocus', 7);
+			this.inputErrorOccurred = createEvent(this, 'inputErrorOccurred', 7);
 			this.internals = this.attachInternals();
 		}
 		get element() {