@ongov/ontario-design-system-component-library 4.3.1-alpha.1 → 5.0.0-alpha.10

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

@@ -1,19 +1,32 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { C as ConsoleMessageClass } from './console-message.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
 
 const ontarioCardCollectionCss =
-	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0;padding:0}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(25% - 2rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(4n){margin-right:0}@media screen and (max-width: 73em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card):nth-child(2n){margin-right:0}}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-4 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(33.3% - 1.75rem)}.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card):nth-child(3n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(50% - 1.25rem)}.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card):nth-child(2n){margin-right:0}@media screen and (max-width: 40em){.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card){width:calc(100% - 0.5rem)}}';
+	'.ontario-card-collection__container{display:flex;flex-wrap:wrap;gap:2rem;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 OntarioCardCollectionStyle0 = ontarioCardCollectionCss;
 
 const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCardCollection extends HTMLElement {
+	class OntarioCardCollection extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.cardsPerRow = 3;
-			this.cardsPerRowState = undefined;
 		}
+		get host() {
+			return this;
+		}
+		/**
+		 * The number of cards to display per row.
+		 *
+		 * If no number is passed, it will default to 3.
+		 */
+		cardsPerRow = 3;
+		/**
+		 * Mutable variable, for internal use only.
+		 *
+		 * Set number of cards per row depending on validation result.
+		 */
+		cardsPerRowState;
 		/**
 		 * Watch for changes to the `cardsPerRow` property for validation purposes.
 		 *
@@ -28,9 +41,7 @@ const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 					.addRegularText('on')
 					.addMonospaceText(' <ontario-card> ')
 					.addRegularText(
-						`${
-							isNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'
-						}; only a positive number is allowed. The default number of cards per row: `,
+						`${isNaN(this.cardsPerRow) ? 'was set to a non-numeric value' : 'was set to a negative number'}; only a positive number is allowed. The default number of cards per row: `,
 					)
 					.addMonospaceText(' 3 ')
 					.addRegularText('was assumed.')
@@ -55,13 +66,10 @@ const OntarioCardCollection$1 = /*@__PURE__*/ proxyCustomElement(
 		render() {
 			return h(
 				'ul',
-				{ key: '71bc8894e0cd5dd35ed2878eda867563dfa46e5d', class: this.getClass() },
-				h('slot', { key: '2759d92d65a4f427ed5375b1acba7b2da6ebaffa' }),
+				{ key: '9ff47cd840a551719ce0db9cbb89b6e3186bfe31', class: this.getClass() },
+				h('slot', { key: '4396152d6d66e79a77206bd2aa2a8e2115614afd' }),
 			);
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
 				cardsPerRow: ['validateCardsPerRow'],

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

@@ -1 +1 @@
-{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,wvCAAwvC,CAAC;AAC1xC,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;2BAQE,CAAC;;;;;;;;IAepC,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"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\tjustify-content: flex-start;\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% - 2rem);\n\n\t&:nth-child(4n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$medium-breakpoint) {\n\t\twidth: calc(50% - 1.25rem);\n\n\t\t&:nth-child(2n) {\n\t\t\tmargin-right: spacing.$spacing-0;\n\t\t}\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-3 ::slotted(ontario-card) {\n\twidth: calc(33.3% - 1.75rem);\n\n\t&:nth-child(3n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\n\t}\n}\n\n.ontario-card-collecton--cards-per-row-2 ::slotted(ontario-card) {\n\twidth: calc(50% - 1.25rem);\n\n\t&:nth-child(2n) {\n\t\tmargin-right: spacing.$spacing-0;\n\t}\n\n\t@media screen and (max-width: breakpoints.$small-breakpoint) {\n\t\twidth: calc(100% - 0.5rem);\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}
+{"file":"ontario-card-collection.js","mappings":";;;AAAA,MAAM,wBAAwB,GAAG,6zBAA6zB,CAAC;AAC/1B,oCAAe,wBAAwB;;MCQ1BA,uBAAqB;;;;;;;;;;;;IAQzB,WAAW,GAAgB,CAAC,CAAC;;;;;;IAOpB,gBAAgB,CAAS;;;;;;IAQ1C,mBAAmB;QAClB,IAAI,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,EAAE;YACnF,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;YAC1C,OAAO;iBACL,kBAAkB,EAAE;iBACpB,gBAAgB,CAAC,iBAAiB,CAAC;iBACnC,cAAc,CAAC,IAAI,CAAC;iBACpB,gBAAgB,CAAC,kBAAkB,CAAC;iBACpC,cAAc,CACd,GACC,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,gCAAgC,GAAG,8BAC9D,4EAA4E,CAC5E;iBACA,gBAAgB,CAAC,KAAK,CAAC;iBACvB,cAAc,CAAC,cAAc,CAAC;iBAC9B,YAAY,EAAE,CAAC;YACjB,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;SAC1B;aAAM;YACN,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,WAAW,CAAC;SACzC;KACD;;;;IAKO,QAAQ;QACf,OAAO;;8CAEqC,IAAI,CAAC,gBAAgB;KAC9D,CAAC,IAAI,EAAE,CAAC;KACX;IAED,iBAAiB;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;KAC3B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IACzB,8DAAa,CACT,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCardCollection"],"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\tgap: spacing.$spacing-6;\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

@@ -1,160 +1,305 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { a as validateValueAgainstArray } from './validation-functions.js';
-import { C as ConsoleMessageClass } from './console-message.js';
+import { p as proxyCustomElement, H, h } from './p-846438ed.js';
+import { a as validateValueAgainstArray } from './p-edb765a1.js';
+import { C as ConsoleMessageClass } from './p-b2019a19.js';
+import { p as printArray } from './p-083804e2.js';
 
-const CardTypes = ['basic', 'image', 'title', 'horizontal'];
-const HeaderTypes = ['default', 'light', 'dark'];
+const Layouts = ['vertical', 'horizontal'];
+const HeaderColours = [
+	'dark-accent',
+	'light-accent',
+	'light-gold',
+	'light-yellow',
+	'light-taupe',
+	'light-green',
+	'light-lime',
+	'light-teal',
+	'light-sky',
+	'light-blue',
+	'light-purple',
+	'light-orange',
+	'light-red',
+	'light-magenta',
+	'gold',
+	'yellow',
+	'taupe',
+	'green',
+	'lime',
+	'teal',
+	'sky',
+	'blue',
+	'purple',
+	'orange',
+	'red',
+	'magenta',
+];
 
 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:0 2.5rem 2.5rem 0;padding:0;height:calc(100% - 2.5rem);list-style-type:none;transition:all 0.3s ease-in-out;position:relative;cursor:pointer}.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__header-type--dark.ontario-card__description-false{background-color:#1a1a1a}.ontario-card__header-type--light.ontario-card__description-false{background-color:#f2f2f2}.ontario-card--image-true{margin-top:-0.5rem}.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 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}.ontario-card:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#1a1a1a}.ontario-card__header-type--light .ontario-card__heading{background-color:#f2f2f2;padding-top:1rem;padding-bottom:1rem;padding-right:4rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark .ontario-card__heading{background-color:#1a1a1a;padding-top:1rem;padding-bottom:1rem;border-radius:4px 4px 0 0}.ontario-card__header-type--dark:hover .ontario-card__heading{text-decoration-line:underline;text-decoration-color:#FFFFFF}.ontario-card__heading a{color:#1a1a1a;text-decoration:none;outline:none}.ontario-card__header-type--dark .ontario-card__heading a{color:#FFFFFF}.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__card-type--horizontal .ontario-card__text-container{width:66.6%}.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}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top:1rem}@media screen and (max-width: 73em){.ontario-card__description{padding:0.5rem 1rem 1.5rem 1rem}.ontario-card__header-type--light .ontario-card__description,.ontario-card__header-type--dark .ontario-card__description{padding-top: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", "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 OntarioCardStyle0 = ontarioCardCss;
 
 const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
-	class OntarioCard extends HTMLElement {
+	class OntarioCard extends H {
 		constructor() {
 			super();
 			this.__registerHost();
 			this.__attachShadow();
-			this.label = undefined;
-			this.image = undefined;
-			this.description = undefined;
-			this.cardLink = undefined;
-			this.cardType = 'basic';
-			this.headerType = 'default';
-			this.horizontalImagePositionType = 'left';
-			this.horizontalImageSizeType = 'one-third';
-			this.ariaLabelText = undefined;
-			this.cardTypeState = undefined;
-			this.headerTypeState = undefined;
 		}
+		get host() {
+			return this;
+		}
+		/**
+		 * Text to be displayed within the header.
+		 *
+		 * @example
+		 *	<ontario-card
+		 *		header-type="dark"
+		 *		card-type="horizontal"
+		 *		label="Card Title 1"
+		 *		description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+		 *	>
+		 */
+		label;
+		/**
+		 * Image to be displayed within the card image container.
+		 *
+		 * This is optional.
+		 */
+		image;
+		/**
+		 * Text to be displayed within the card description container.
+		 *
+		 * This is optional.
+		 */
+		description;
+		/**
+		 * Action link for when the card is clicked.
+		 *
+		 * This is optional.
+		 */
+		cardLink;
 		/**
-		 * Watch for changes to the `cardType` property for validation purposes.
+		 * The layout oritnetation of the card.
 		 *
-		 * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).
-		 * If a match is found in one of the array values then `cardType` will be set to the matching array key value.
+		 * If no type is passed, it will default to 'vertical'.
+		 *
+		 */
+		layout = 'vertical';
+		/**
+		 * Set the card's header colour.
+		 *
+		 * This is optional.
+		 */
+		headerColour;
+		/**
+		 * The position of the image when the card-type is set to 'horizontal'.
+		 *
+		 * This prop is only necessry when the card-type is set to 'horizontal'.
+		 *
+		 * @example
+		 * 	<ontario-card
+		 *		card-type="horizontal"
+		 *		label="Card Title 1"
+		 *		image="https://picsum.photos/200/300"
+		 *		horizontal-image-position-type="left"
+		 *		horizontal-image-size-type="one-fourth"
+		 *	  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+		 *	>
+		 *	</ontario-card>
 		 */
-		validateCardType() {
-			const isValid = validateValueAgainstArray(this.cardType, CardTypes);
-			if (isValid) {
-				this.cardTypeState = this.cardType;
-			} else {
-				this.cardTypeState = this.warnDefaultCardType();
+		horizontalImagePositionType = 'left';
+		/**
+		 * The size of the image when the card-type is set to 'horizontal'.
+		 *
+		 * This prop is only necessry when the card-type is set to 'horizontal'.
+		 *
+		 * @example
+		 * 	<ontario-card
+		 *		card-type="horizontal"
+		 *		label="Card Title 1"
+		 *		image="https://picsum.photos/200/300"
+		 *		horizontal-image-position-type="left"
+		 *		horizontal-image-size-type="one-fourth"
+		 *	  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
+		 *	>
+		 *	</ontario-card>
+		 */
+		horizontalImageSizeType = 'one-third';
+		/**
+		 * 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.
+		 *
+		 * This is optional.
+		 *
+		 */
+		ariaLabelText;
+		/**
+		 * Mutable variable, for internal use only.
+		 * Set the card's layout depending on validation result.
+		 */
+		layoutState;
+		/**
+		 * Watch for changes to the `layout` property for validation purposes.
+		 *
+		 * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).
+		 * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.
+		 */
+		validateLayout() {
+			if (this.layout) {
+				const isValid = validateValueAgainstArray(this.layout, Layouts);
+				if (isValid) {
+					this.layoutState = this.layout;
+				} else {
+					this.warnDefaultLayout();
+					this.layoutState = 'vertical';
+				}
 			}
 		}
 		/**
-		 * Watch for changes to the `headerType` property for validation purposes.
+		 * Watch for changes to the `headerColour` property for validation purposes.
 		 *
-		 * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).
-		 * If a match is found in one of the array values then `headerType` will be set to the matching array key value.
+		 * If the user input doesn't match one of the array values then `headerColour` will be kept empty ('').
+		 * If a match is found in one of the array values then `headerColour` will be set to the matching array key value.
 		 */
-		validateHeaderType() {
-			const isValid = validateValueAgainstArray(this.headerType, HeaderTypes);
-			if (isValid) {
-				this.headerTypeState = this.headerType;
-			} else {
-				this.headerTypeState = this.warnDefaultHeaderType();
+		validateHeaderColour() {
+			if (this.headerColour) {
+				const isValid = validateValueAgainstArray(this.headerColour, HeaderColours);
+				if (!isValid) {
+					this.warnDefaultHeaderColour();
+					this.headerColour = '';
+				}
 			}
 		}
 		/**
-		 * Print the invalid `cardType` prop warning message.
-		 * @returns default type (basic).
+		 * Print the invalid `layout` prop warning message.
 		 */
-		warnDefaultCardType() {
+		warnDefaultLayout() {
 			const message = new ConsoleMessageClass();
 			message
 				.addDesignSystemTag()
-				.addMonospaceText(' card-type ')
+				.addMonospaceText(' layout ')
 				.addRegularText('on')
 				.addMonospaceText(' <ontario-card> ')
-				.addRegularText('was set to an invalid type; only')
-				.addMonospaceText(' basic, image, label, horizontal ')
-				.addRegularText('are supported. The default type')
-				.addMonospaceText(' basic ')
+				.addRegularText('was set to an invalid layout; only ')
+				.addMonospaceText(printArray([...Layouts]))
+				.addRegularText(' are supported. The default layout')
+				.addMonospaceText(' vertical ')
 				.addRegularText('is assumed.')
 				.printMessage();
-			return 'basic';
 		}
 		/**
-		 * Print the invalid `headerType` prop warning message.
-		 * @returns default type (default).
+		 * Print the invalid `headerColour` prop warning message.
 		 */
-		warnDefaultHeaderType() {
+		warnDefaultHeaderColour() {
 			const message = new ConsoleMessageClass();
 			message
 				.addDesignSystemTag()
-				.addMonospaceText(' header-type ')
+				.addMonospaceText(' header-colour ')
 				.addRegularText('on')
 				.addMonospaceText(' <ontario-card> ')
-				.addRegularText('was set to an invalid type; only')
-				.addMonospaceText(' default, light, dark')
-				.addRegularText('are supported. The default type')
-				.addMonospaceText(' default ')
-				.addRegularText('is assumed.')
+				.addRegularText('was set to an invalid colour; only ')
+				.addMonospaceText(printArray([...HeaderColours]))
+				.addRegularText(' are supported. ')
+				.addRegularText('No colour is assumed as the default.')
 				.printMessage();
-			return 'default';
 		}
 		/**
-		 * @returns the classes of the ontario cards based off the `cardType` and `headerType`.
+		 * Returns the top level classes of the card.
+		 *
+		 * @returns {string}
 		 */
-		getClass() {
+		getCardClasses() {
 			const baseClass =
-				this.cardTypeState === 'horizontal'
-					? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
-					: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;
+				this.layoutState === 'horizontal'
+					? `ontario-card ontario-card__card-type--${this.layoutState} ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`
+					: `ontario-card ontario-card__card-type--basic ontario-card--position-${this.layoutState}`;
 			const descriptionClass = this.description ? '' : ' ontario-card__description-false';
-			return `${baseClass}${descriptionClass}`;
+			const backgroundClass =
+				this.headerColour && !this.description ? `ontario-card__background--${this.headerColour}` : '';
+			return `${baseClass} ${descriptionClass} ${backgroundClass}`.trim();
 		}
+		/**
+		 * Returns the heading classes of the card.
+		 *
+		 * @returns {string}
+		 */
+		getCardHeadingClasses() {
+			const baseClass = 'ontario-card__heading';
+			const backgroundClass =
+				this.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)
+					? `ontario-card__heading--${this.headerColour}`
+					: '';
+			return `${baseClass} ${backgroundClass}`.trim();
+		}
+		/**
+		 * Returns the url that the card links to.
+		 *
+		 * @returns {string}
+		 */
 		getHref() {
 			return this.cardLink ? this.cardLink : '#';
 		}
+		/**
+		 * Component life cycle hook.
+		 *
+		 * https://stenciljs.com/docs/component-lifecycle#connectedcallback
+		 */
 		componentWillLoad() {
-			this.validateCardType();
-			this.validateHeaderType();
+			this.validateLayout();
+			this.validateHeaderColour();
 		}
 		render() {
 			return h(
 				'li',
-				{ key: '606e74cea5d81cd31b355ffb1a71cf7450126cf4', class: this.getClass() },
+				{ key: '690b3ae2a75c4b92e080ffa3c262af01fec21952', class: this.getCardClasses() },
 				this.image &&
 					h(
 						'div',
-						{ class: 'ontario-card__image-container' },
+						{ key: 'f384f101eca056d027276b2f7a1f9e440304cec3', class: 'ontario-card__image-container' },
 						h(
 							'a',
-							{ 'href': this.getHref(), 'aria-label': this.ariaLabelText },
-							h('img', { class: 'ontario-card__image', src: this.image }),
+							{
+								'key': 'bc4a3b33c10ed1491ad26fd3e6a3e6053d06eb07',
+								'href': this.getHref(),
+								'aria-label': this.ariaLabelText,
+							},
+							h('img', {
+								key: '4918a0bf517f85035c5c5ee8f26fb3eb3398853e',
+								class: 'ontario-card__image',
+								src: this.image,
+							}),
 						),
 					),
 				h(
 					'div',
 					{
-						key: '7d71d14690d4e75dcf1e4ef5c0198183b27e4b39',
+						key: '528e7f220a8829e4795ac442e46fa55d2482eb98',
 						class: `ontario-card__text-container ${this.image ? 'ontario-card--image-true' : ''}`,
 					},
 					h(
 						'h2',
-						{ key: '4f6a337efa3986a5023f3c17e869f072aaef0e4f', class: 'ontario-card__heading' },
+						{ key: '372355c20bcd85c98a663ffa3e8d19a4cfb30a46', class: this.getCardHeadingClasses() },
 						h(
 							'a',
 							{
-								'key': '6efece75daafc95e43dca997e895dc88cab9194c',
+								'key': '7675fa500550255eafdea15078d3b196e32e3033',
 								'href': this.getHref(),
 								'aria-label': this.ariaLabelText,
 							},
 							this.label,
 						),
 					),
-					this.description && h('div', { class: 'ontario-card__description' }, h('p', null, this.description)),
+					this.description &&
+						h(
+							'div',
+							{ key: 'cd1492211c29568919aee9996fd167daea1806b1', class: 'ontario-card__description' },
+							h('p', { key: 'b638a626ae69888509b3cf9d194668097890580c' }, this.description),
+						),
 				),
 			);
 		}
-		get host() {
-			return this;
-		}
 		static get watchers() {
 			return {
-				cardType: ['validateCardType'],
-				headerType: ['validateHeaderType'],
+				layout: ['validateLayout'],
+				headerColour: ['validateHeaderColour'],
 			};
 		}
 		static get style() {
@@ -169,18 +314,17 @@ const OntarioCard$1 = /*@__PURE__*/ proxyCustomElement(
 			image: [1],
 			description: [1],
 			cardLink: [1, 'card-link'],
-			cardType: [1, 'card-type'],
-			headerType: [1, 'header-type'],
+			layout: [1],
+			headerColour: [1, 'header-colour'],
 			horizontalImagePositionType: [1, 'horizontal-image-position-type'],
 			horizontalImageSizeType: [1, 'horizontal-image-size-type'],
 			ariaLabelText: [1, 'aria-label-text'],
-			cardTypeState: [32],
-			headerTypeState: [32],
+			layoutState: [32],
 		},
 		undefined,
 		{
-			cardType: ['validateCardType'],
-			headerType: ['validateHeaderType'],
+			layout: ['validateLayout'],
+			headerColour: ['validateHeaderColour'],
 		},
 	],
 );

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

@@ -1 +1 @@
-{"file":"ontario-card.js","mappings":"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","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const CardTypes = ['basic', 'image', 'title', 'horizontal'] as const;\nexport const HeaderTypes = ['default', 'light', 'dark'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type CardType = (typeof CardTypes)[number];\nexport type HeaderType = (typeof HeaderTypes)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[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: spacing.$spacing-0 spacing.$spacing-7 spacing.$spacing-7 spacing.$spacing-0;\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\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__header-type--dark.ontario-card__description-false {\n\tbackground-color: colours.$ontario-colour-black;\n}\n\n.ontario-card__header-type--light.ontario-card__description-false {\n\tbackground-color: colours.$ontario-greyscale-5;\n}\n\n.ontario-card--image-true {\n\tmargin-top: spacing.$spacing-2 * -1;\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\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\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__header-type--light & {\n\t\tbackground-color: colours.$ontario-greyscale-5;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tpadding-right: spacing.$spacing-9;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark & {\n\t\tbackground-color: colours.$ontario-colour-black;\n\t\tpadding-top: spacing.$spacing-4;\n\t\tpadding-bottom: spacing.$spacing-4;\n\t\tborder-radius: globalVariables.$global-radius globalVariables.$global-radius 0 0;\n\t}\n\n\t.ontario-card__header-type--dark:hover & {\n\t\ttext-decoration-line: underline;\n\t\ttext-decoration-color: colours.$ontario-colour-white;\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.ontario-card__header-type--dark & {\n\t\t\tcolor: colours.$ontario-colour-white;\n\t\t}\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__text-container {\n\t.ontario-card__card-type--horizontal & {\n\t\twidth: 66.6%;\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.ontario-card__header-type--light &,\n\t.ontario-card__header-type--dark & {\n\t\tpadding-top: spacing.$spacing-4;\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\n\t\t.ontario-card__header-type--light &,\n\t\t.ontario-card__header-type--dark & {\n\t\t\tpadding-top: spacing.$spacing-4;\n\t\t}\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\tCardType,\n\tCardTypes,\n\tHeaderType,\n\tHeaderTypes,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\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 * 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 * 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 type of card to render.\n\t *\n\t * If no type is passed, it will default to 'basic'.\n\t *\n\t */\n\t@Prop() cardType: CardType = 'basic';\n\n\t/**\n\t * The type of header to render.\n\t *\n\t * If no type is passed, it will default to 'default'.\n\t */\n\t@Prop() headerType: HeaderType = 'default';\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/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's type depending on validation result.\n\t */\n\t@State() private cardTypeState: string;\n\n\t/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's header type depending on validation result.\n\t */\n\t@State() private headerTypeState: string;\n\n\t/**\n\t * Watch for changes to the `cardType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `cardType` will be set to its default (`basic`).\n\t * If a match is found in one of the array values then `cardType` will be set to the matching array key value.\n\t */\n\t@Watch('cardType')\n\tvalidateCardType() {\n\t\tconst isValid = validateValueAgainstArray(this.cardType, CardTypes);\n\t\tif (isValid) {\n\t\t\tthis.cardTypeState = this.cardType;\n\t\t} else {\n\t\t\tthis.cardTypeState = this.warnDefaultCardType();\n\t\t}\n\t}\n\n\t/**\n\t * Watch for changes to the `headerType` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `headerType` will be set to its default (`default`).\n\t * If a match is found in one of the array values then `headerType` will be set to the matching array key value.\n\t */\n\t@Watch('headerType')\n\tvalidateHeaderType() {\n\t\tconst isValid = validateValueAgainstArray(this.headerType, HeaderTypes);\n\t\tif (isValid) {\n\t\t\tthis.headerTypeState = this.headerType;\n\t\t} else {\n\t\t\tthis.headerTypeState = this.warnDefaultHeaderType();\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `cardType` prop warning message.\n\t * @returns default type (basic).\n\t */\n\tprivate warnDefaultCardType(): CardType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' card-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' basic, image, label, horizontal ')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' basic ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'basic';\n\t}\n\n\t/**\n\t * Print the invalid `headerType` prop warning message.\n\t * @returns default type (default).\n\t */\n\tprivate warnDefaultHeaderType(): HeaderType {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-type ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid type; only')\n\t\t\t.addMonospaceText(' default, light, dark')\n\t\t\t.addRegularText('are supported. The default type')\n\t\t\t.addMonospaceText(' default ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t\treturn 'default';\n\t}\n\n\t/**\n\t * @returns the classes of the ontario cards based off the `cardType` and `headerType`.\n\t */\n\tprivate getClass() {\n\t\tconst baseClass =\n\t\t\tthis.cardTypeState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--horizontal ontario-card__image-${this.horizontalImagePositionType} ontario-card__image-size-${this.horizontalImageSizeType}`\n\t\t\t\t: `ontario-card ontario-card__header-type--${this.headerTypeState} ontario-card__card-type--${this.cardTypeState}`;\n\n\t\tconst descriptionClass = this.description ? '' : ' ontario-card__description-false';\n\n\t\treturn `${baseClass}${descriptionClass}`;\n\t}\n\n\tprivate getHref() {\n\t\treturn this.cardLink ? this.cardLink : '#';\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateCardType();\n\t\tthis.validateHeaderType();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<li class={this.getClass()}>\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\" 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<h2 class=\"ontario-card__heading\">\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</h2>\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}
+{"file":"ontario-card.js","mappings":";;;;;AAAO,MAAM,OAAO,GAAG,CAAC,UAAU,EAAE,YAAY,CAAU,CAAC;AAQpD,MAAM,aAAa,GAAG;IAC5B,aAAa;IACb,cAAc;IACd,YAAY;IACZ,cAAc;IACd,aAAa;IACb,aAAa;IACb,YAAY;IACZ,YAAY;IACZ,WAAW;IACX,YAAY;IACZ,cAAc;IACd,cAAc;IACd,WAAW;IACX,eAAe;IACf,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;IACP,MAAM;IACN,MAAM;IACN,KAAK;IACL,MAAM;IACN,QAAQ;IACR,QAAQ;IACR,KAAK;IACL,SAAS;CACT;;ACnCD,MAAM,cAAc,GAAG,wmPAAwmP,CAAC;AAChoP,0BAAe,cAAc;;MCiBhBA,aAAW;;;;;;;;;;;;;;;;;;IAcf,KAAK,CAAS;;;;;;IAOd,KAAK,CAAU;;;;;;IAOf,WAAW,CAAU;;;;;;IAOrB,QAAQ,CAAU;;;;;;;IAQlB,MAAM,GAAY,UAAU,CAAC;;;;;;IAO7B,YAAY,CAAgB;;;;;;;;;;;;;;;;;IAkB5B,2BAA2B,GAAiC,MAAM,CAAC;;;;;;;;;;;;;;;;;IAkBnE,uBAAuB,GAA6B,WAAW,CAAC;;;;;;;IAQhE,aAAa,CAAU;;;;;IAMd,WAAW,CAAS;;;;;;;IASrC,cAAc;QACb,IAAI,IAAI,CAAC,MAAM,EAAE;YAChB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAChE,IAAI,OAAO,EAAE;gBACZ,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;aAC/B;iBAAM;gBACN,IAAI,CAAC,iBAAiB,EAAE,CAAC;gBACzB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;aAC9B;SACD;KACD;;;;;;;IASD,oBAAoB;QACnB,IAAI,IAAI,CAAC,YAAY,EAAE;YACtB,MAAM,OAAO,GAAG,yBAAyB,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;YAE5E,IAAI,CAAC,OAAO,EAAE;gBACb,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBAC/B,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;aACvB;SACD;KACD;;;;IAKO,iBAAiB;QACxB,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,UAAU,CAAC;aAC5B,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,qCAAqC,CAAC;aACrD,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC;aAC1C,cAAc,CAAC,oCAAoC,CAAC;aACpD,gBAAgB,CAAC,YAAY,CAAC;aAC9B,cAAc,CAAC,aAAa,CAAC;aAC7B,YAAY,EAAE,CAAC;KACjB;;;;IAKO,uBAAuB;QAC9B,MAAM,OAAO,GAAG,IAAI,mBAAmB,EAAE,CAAC;QAC1C,OAAO;aACL,kBAAkB,EAAE;aACpB,gBAAgB,CAAC,iBAAiB,CAAC;aACnC,cAAc,CAAC,IAAI,CAAC;aACpB,gBAAgB,CAAC,kBAAkB,CAAC;aACpC,cAAc,CAAC,qCAAqC,CAAC;aACrD,gBAAgB,CAAC,UAAU,CAAC,CAAC,GAAG,aAAa,CAAC,CAAC,CAAC;aAChD,cAAc,CAAC,kBAAkB,CAAC;aAClC,cAAc,CAAC,sCAAsC,CAAC;aACtD,YAAY,EAAE,CAAC;KACjB;;;;;;IAOO,cAAc;QACrB,MAAM,SAAS,GACd,IAAI,CAAC,WAAW,KAAK,YAAY;cAC9B,yCAAyC,IAAI,CAAC,WAAW,wBAAwB,IAAI,CAAC,2BAA2B,6BAA6B,IAAI,CAAC,uBAAuB,EAAE;cAC5K,sEAAsE,IAAI,CAAC,WAAW,EAAE,CAAC;QAE7F,MAAM,gBAAgB,GAAG,IAAI,CAAC,WAAW,GAAG,EAAE,GAAG,kCAAkC,CAAC;QAEpF,MAAM,eAAe,GACpB,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,6BAA6B,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,CAAC;QAEhG,OAAO,GAAG,SAAS,IAAI,gBAAgB,IAAI,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC;KACpE;;;;;;IAOO,qBAAqB;QAC5B,MAAM,SAAS,GAAG,uBAAuB,CAAC;QAE1C,MAAM,eAAe,GACpB,IAAI,CAAC,YAAY,IAAI,yBAAyB,CAAC,IAAI,CAAC,YAAY,EAAE,aAAa,CAAC;cAC7E,0BAA0B,IAAI,CAAC,YAAY,EAAE;cAC7C,EAAE,CAAC;QAEP,OAAO,GAAG,SAAS,IAAI,eAAe,EAAE,CAAC,IAAI,EAAE,CAAC;KAChD;;;;;;IAOO,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,GAAG,GAAG,CAAC;KAC3C;;;;;;IAOD,iBAAiB;QAChB,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,oBAAoB,EAAE,CAAC;KAC5B;IAED,MAAM;QACL,QACC,2DAAI,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAC9B,IAAI,CAAC,KAAK,KACV,4DAAK,KAAK,EAAC,+BAA+B,IACzC,0DAAG,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAc,IAAI,CAAC,aAAa,IACtD,4DAAK,KAAK,EAAC,qBAAqB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI,CACjD,CACC,CACN,EACD,4DAAK,KAAK,EAAE,gCAAgC,IAAI,CAAC,KAAK,GAAG,0BAA0B,GAAG,EAAE,EAAE,IACzF,2DAAI,KAAK,EAAE,IAAI,CAAC,qBAAqB,EAAE,IACtC,0DAAG,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,gBAAc,IAAI,CAAC,aAAa,IACrD,IAAI,CAAC,KAAK,CACR,CACA,EACJ,IAAI,CAAC,WAAW,KAChB,4DAAK,KAAK,EAAC,2BAA2B,IACrC,4DAAI,IAAI,CAAC,WAAW,CAAK,CACpB,CACN,CACI,CACF,EACJ;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["OntarioCard"],"sources":["src/components/ontario-card/ontario-card-types.tsx","src/components/ontario-card/ontario-card.scss?tag=ontario-card&encapsulation=shadow","src/components/ontario-card/ontario-card.tsx"],"sourcesContent":["export const Layouts = ['vertical', 'horizontal'] as const;\nexport const HorizontalImagePositionTypes = ['left', 'right'] as const;\nexport const HorizontalImageSizeTypes = ['one-fourth', 'one-third'] as const;\n\nexport type Layout = (typeof Layouts)[number];\nexport type HorizontalImagePositionType = (typeof HorizontalImagePositionTypes)[number];\nexport type HorizontalImageSizeType = (typeof HorizontalImageSizeTypes)[number];\n\nexport const HeaderColours = [\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];\n\nexport type HeaderColour = (typeof HeaderColours)[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\tHeaderColour,\n\tHeaderColours,\n\tHorizontalImagePositionType,\n\tHorizontalImageSizeType,\n\tLayout,\n\tLayouts,\n} from './ontario-card-types';\nimport { validateValueAgainstArray } from '../../utils/validation/validation-functions';\nimport { ConsoleMessageClass } from '../../utils/console-message/console-message';\nimport { printArray } from '../../utils/helper/utils';\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 * 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 * 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 oritnetation of the card.\n\t *\n\t * If no type is passed, it will default to 'vertical'.\n\t *\n\t */\n\t@Prop() layout?: Layout = '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/**\n\t * Mutable variable, for internal use only.\n\t * Set the card's layout depending on validation result.\n\t */\n\t@State() private layoutState: string;\n\n\t/**\n\t * Watch for changes to the `layout` property for validation purposes.\n\t *\n\t * If the user input doesn't match one of the array values then `layout` will be set to its default (`vertical`).\n\t * If a match is found in one of the array values then `layoutState` will be set to the matching array key value.\n\t */\n\t@Watch('layout')\n\tvalidateLayout() {\n\t\tif (this.layout) {\n\t\t\tconst isValid = validateValueAgainstArray(this.layout, Layouts);\n\t\t\tif (isValid) {\n\t\t\t\tthis.layoutState = this.layout;\n\t\t\t} else {\n\t\t\t\tthis.warnDefaultLayout();\n\t\t\t\tthis.layoutState = 'vertical';\n\t\t\t}\n\t\t}\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 ('').\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\tif (this.headerColour) {\n\t\t\tconst isValid = validateValueAgainstArray(this.headerColour, HeaderColours);\n\n\t\t\tif (!isValid) {\n\t\t\t\tthis.warnDefaultHeaderColour();\n\t\t\t\tthis.headerColour = '';\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Print the invalid `layout` prop warning message.\n\t */\n\tprivate warnDefaultLayout() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' layout ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid layout; only ')\n\t\t\t.addMonospaceText(printArray([...Layouts]))\n\t\t\t.addRegularText(' are supported. The default layout')\n\t\t\t.addMonospaceText(' vertical ')\n\t\t\t.addRegularText('is assumed.')\n\t\t\t.printMessage();\n\t}\n\n\t/**\n\t * Print the invalid `headerColour` prop warning message.\n\t */\n\tprivate warnDefaultHeaderColour() {\n\t\tconst message = new ConsoleMessageClass();\n\t\tmessage\n\t\t\t.addDesignSystemTag()\n\t\t\t.addMonospaceText(' header-colour ')\n\t\t\t.addRegularText('on')\n\t\t\t.addMonospaceText(' <ontario-card> ')\n\t\t\t.addRegularText('was set to an invalid colour; only ')\n\t\t\t.addMonospaceText(printArray([...HeaderColours]))\n\t\t\t.addRegularText(' are supported. ')\n\t\t\t.addRegularText('No colour is assumed as the default.')\n\t\t\t.printMessage();\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.layoutState === 'horizontal'\n\t\t\t\t? `ontario-card ontario-card__card-type--${this.layoutState} 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.layoutState}`;\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 =\n\t\t\tthis.headerColour && validateValueAgainstArray(this.headerColour, HeaderColours)\n\t\t\t\t? `ontario-card__heading--${this.headerColour}`\n\t\t\t\t: '';\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.validateLayout();\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\" 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<h2 class={this.getCardHeadingClasses()}>\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</h2>\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}